《CSS按钮的制作方法系列文章》由会员分享，可在线阅读，更多相关《CSS按钮的制作方法系列文章（9页珍藏版）》请在金锄头文库上搜索。
1、CSS按钮的制作方法系列文章_按钮与链接本文是CSS按钮的制作方法系列文章第一部分：按钮与链接。在上篇文章中我曾提到过一点，按钮在网页中最常用的作用是提交表单，以及作为一个动作的开始按钮，有的时候可以作为页面中着重突出的内容。“提交表单”这个很容易理解，无非是在一个表单的最后添加上“提交”、“重填”这样的按钮，比如注册会员表单、调查表等。“动作的开始按钮”即一个或一系列动作的开始按钮，其实提交表单也属于这种作用之一，只是作为动作的开始按钮可以运用的更灵活，比如淘宝商铺购买页面的“立即购买”和“加入购物车”按钮，如上图中所示，它是开启下一个动作的按钮，也可以说是提交购买数量的表单提交按钮。而图中
2、的“在线申请”和“点击阅读”按钮则仅仅是一个动作开始按钮。有人会问，“着重突出的内容”和开始按钮不是一样的吗？其实在表面意义上是相同的，但在其“内在”有着本质的不同，“内在”其实就是“源代码”。有时候着重突出的内容虽然在设计时做的像个按钮，但在制作页面时却是用链接标签制作成一个链接。为什么要这样做？第一，为了CSS语义的正确性，因为页面中着重突出的内容本身不是按钮，只是做成了按钮的样子而已；第二，为了SEO优化，如果一个页面中突出的内容制作成一个按钮，为了让其打开后面的页面，必须写一段Javascript，让其有点击触发的效果，但搜索引擎的搜索爬虫不能由此按钮爬到更深一步的页面。而如果将其做成
3、一个链接，爬虫会顺理成章地从该链接搜索到下一个页面，从而保持网站被搜索引擎抓取的纵深和连续性。所以，形式虽然都是按钮，却存在着几种细微的差别，不知道通过上面的讲解，您对它们是否有了一定的了解？不理解也没关系，以后慢慢体会、慢慢消化。如果对此已烂熟于胸，那就即刻进入第二部分三种按钮形式，以及它们的优缺点。CSS按钮制作方法系列文章_按钮形式及优缺点本文是CSS按钮的制作方法系列文章第二部分：三种按钮形式，以及它们的优缺点。在上篇文章中，我提到了按钮的三种作用和两种制作方法。三种作用分别是：提交表单、动作开始按钮和着重突出；两种制作方法是：制作成按钮和制作成链接。有些朋友会出现疑问，上篇文章中明明
4、写的是两种制作方法，为什么这篇文章又说是三种按钮形式及优缺点呢？因为从制作方面讲，按钮除了前面文章中提到的input和链接标签，还有一种制作方法：button。input和button都可以制作按钮，它们制作按钮的代码分别是： 和 在线申请以“/”作为结尾，利用type定义类型，让其变为按钮、复选框、单选框等等，而当其是提交按钮时type类型为submit，可见其着重体现“提交”这个意义。以结尾，相比input而言，提供了更为强大的功能和更丰富的内容。与 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们
5、在按钮中创建一个吸引人的标记图像，比如这样写：在线申请 在线申请 需要注意的是，请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 button，而其他浏览器中（包括 W3C 规范）的默认值是 submit。虽然所有浏览器都支持标签，但如果在 Html 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 与 之间的文本，而其他浏览器将提交 value 属性的内容。以上就是按钮的两种制作方法，我们可以当做按钮的两种形式。第三种形式就是上篇文章中说到的链接标签制作方法。这三种方法都可以将Html中的元素做成按钮样式
6、，如上图中所示。至于具体的制作方法嘛，我将在下篇文章中详细讲解。如有兴趣请点击第三部分三种按钮的制作方法继续阅读。CSS按钮制作方法系列_三种按钮的制作方法CSS按钮制作方法系列_三种按钮的制作方法 来源：黄超点击放大 本文是CSS按钮的制作方法系列文章第三部分：三种按钮的制作方法。在上篇文章中，我提到了三种按钮，它们是用和html代码input制作的按钮、用button制作的按钮和用链接标签制作的按钮。本篇文章将讲解三种按钮的制作方法。其实按钮的制作并不难，在前面的文章中我也曾提到过，可以参阅用CSS制作个性化按钮这篇文章。这篇文章中只提到了用input制作按钮，但这次文章中还涉及了butt
7、on和a的用法，所以会进行更全面的介绍。先请看上面图中所示，最左侧的一排是没有用CSS修饰的源代码input、button、a预览时的原始样式，要想让它们成为最右侧的按钮样式必须经过CSS修饰才可以。下面就开始制作步骤。在图中从上至下的Html代码是： 在线申请 点击阅读 将上面的代码复制到网页源代码中，在浏览器中预览一下，效果应该如上图中所示。下面就开始利用CSS对按钮进行修饰。CSS代码如下： 经过上面的CSS修饰，三个按钮就会变成上图最右边那排按钮的样式，但要注意CSS中的背景图片路径。到这里，三种按钮的简单制作方法就算完成了，如果想为按钮的效果升级或学习更高级的制作方法请继续关注下篇文
8、章第四部分：按钮的高级制作方法，增强特效的方法等。CSS按钮的制作方法系列文章-按钮特效css按钮特效 来源：黄超点击放大 本文是CSS按钮的制作方法系列文章第四部分：按钮的高级制作方法，增强特效等。在上篇文章中，讲解了三种按钮的制作方法，三者最终完成效果相同。为了优化增强网站与用户的交互体验，给网页中的按钮加上一些特效是非常友好的选择，比如一些突出的修饰效果、翻转效果等。一提到翻转效果，自然会联想起鼠标悬浮状态和点击后状态。在input、button、a三种按钮的制作方法中，鼠标悬浮时翻转效果制作起来都不难，但最简单的还要属标签，因为它仅用:hover、:active两个伪类就可以完成效果制
9、作。虽然input和button也可以用:hover和:active伪类定义，但二者的效果仅被一些现代浏览器支持，诸如IE7以上版本、Firefox、Opera、Chrome等等，如果非要让input和button在IE6等浏览器中也具有悬浮时的翻转效果也不是没有办法，那就需要用到一小段Javascript代码，这里暂且不讨论。一、鼠标悬浮时的翻转效果 CSS代码如下：a:hover,button:hover,input:hover background:url(btnbg2.gif); 这里仅列出了鼠标悬浮时状态的CSS代码，其余按钮Html、CSS代码请参阅上篇文章三种按钮的制作方法，bt
10、nbg2.gif要事先准备好，即为上图中鼠标悬浮时状态背景图。既然有了鼠标悬浮状态的效果，那就再添加一个鼠标点击后的效果：a:visited background:url(btnbg3.gif); 需要注意的是，按照伪类LoVe-HAte的原则，这段CSS要添加在伪类:hover的前面，即：a:visited background:url(btnbg3.gif); a:hover,button:hover,input:hover background:url(btnbg2.gif); 二、修饰图片在按钮上添加一些修饰图片也可以起到突出按钮的作用，比如上图中最下面的按钮，上面多了一个绿色的小对勾
11、，在无形间多少勾起了用户的点击欲望。使用input和a标签制作方法，这个效果只需要使用背景图就能搞定，但使用button方法制作则更为简单，只需要准备一张小小的透明对勾图片，然后将图片插入到Html代码的与之间即可，比如： 在线申请 三、滑动门效果利用滑动门效果，可以让按钮的长度根据按钮中的文字长度自动伸展，具体制作方法可以参考滑动门效果及其制作方法这篇文章。到这里，几种按钮的特效部分就算完成了，如果想在制作方面和显示效果方面有更多提高，请继续关注下篇文章第五部分：其它按钮特效及制作方法。CSS按钮的制作方法系列文章-其它按钮特效css3圆角按钮 来源：smashingmagzine点击放大 本文是CSS按钮的制作方法系列文章第五部分：其它按钮特效以及制作方法等。在前面的文章中，已经讲了按钮和链接的主要区别，不同的作用以及不同的制作费方法等。本文将向您介绍一些按钮的特殊效果及制作方法。为了追求比较好的显示效果和精简的结构源代码，许多制作者会采用一些以前系列文章中没有用到的方法，比如CSS3和CSS Spri
