CSS按钮的制作方法系列文章

CSS按钮的制作方法系列文章_按钮与链接本文是CSS按钮的制作方法系列文章第一部分：按钮与链接。在上篇文章中我曾提到过一点，按钮在网页中最常用的作用是提交表单，以及作为一个动作的开始按钮，有的时候可以作为页面中着重突出的内容。“提交表单”这个很容易理解，无非是在一个表单的最后添加上“提交”、“重填”这样的按钮，比如注册会员表单、调查表等。“动作的开始按钮”即一个或一系列动作的开始按钮，其实提交表单也属于这种作用之一，只是作为动作的开始按钮可以运用的更灵活，比如淘宝商铺购买页面的“立即购买”和“加入购物车”按钮，如上图中所示，它是开启下一个动作的按钮，也可以说是提交购买数量的表单提交按钮。而图中的“在线申请”和“点击阅读”按钮则仅仅是一个动作开始按钮。有人会问，“着重突出的内容”和开始按钮不是一样的吗？其实在表面意义上是相同的，但在其“内在”有着本质的不同，“内在”其实就是“源代码”。有时候着重突出的内容虽然在设计时做的像个按钮，但在制作页面时却是用链接标签a制作成一个链接。为什么要这样做？第一，为了CSS语义的正确性，因为页面中着重突出的内容本身不是按钮，只是做成了按钮的样子而已；第二，为了SEO优化，如果一个页面中突出的内容制作成一个按钮，为了让其打开后面的页面，必须写一段Javascript，让其有点击触发的效果，但搜索引擎的搜索爬虫不能由此按钮爬到更深一步的页面。而如果将其做成一个链接，爬虫会顺理成章地从该链接搜索到下一个页面，从而保持网站被搜索引擎抓取的纵深和连续性。所以，形式虽然都是按钮，却存在着几种细微的差别，不知道通过上面的讲解，您对它们是否有了一定的了解？不理解也没关系，以后慢慢体会、慢慢消化。如果对此已烂熟于胸，那就即刻进入第二部分《三种按钮形式，以及它们的优缺点》。CSS按钮制作方法系列文章_按钮形式及优缺点本文是CSS按钮的制作方法系列文章第二部分：三种按钮形式，以及它们的优缺点。在上篇文章中，我提到了按钮的三种作用和两种制作方法。三种作用分别是：提交表单、动作开始按钮和着重突出；两种制作方法是：制作成按钮和制作成链接。有些朋友会出现疑问，上篇文章中明明写的是两种制作方法，为什么这篇文章又说是三种按钮形式及优缺点呢？因为从制作方面讲，按钮除了前面文章中提到的input和链接标签a，还有一种制作方法：button。input和button都可以制作按钮，它们制作按钮的代码分别是：inputtype=submitname=Submitvalue=提交表单/和buttontype=button在线申请/buttoninput以“/”作为结尾，利用type定义类型，让其变为按钮、复选框、单选框等等，而当其是提交按钮时type类型为submit，可见其着重体现“提交”这个意义。button以/button结尾，相比input而言，提供了更为强大的功能和更丰富的内容。button与/button标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像，比如这样写：buttonimgsrc=button.gifalt=在线申请/在线申请/buttonbuttonimgsrc=button.gifalt=在线申请/b在线申请/b/button需要注意的是，请始终为按钮规定type属性。InternetExplorer的默认类型是button，而其他浏览器中（包括W3C规范）的默认值是submit。虽然所有浏览器都支持button标签，但如果在Html表单中使用button元素，不同的浏览器会提交不同的值。InternetExplorer将提交button与button/之间的文本，而其他浏览器将提交value属性的内容。以上就是按钮的两种制作方法，我们可以当做按钮的两种形式。第三种形式就是上篇文章中说到的链接标签a制作方法。这三种方法都可以将Html中的元素做成按钮样式，如上图中所示。至于具体的制作方法嘛，我将在下篇文章中详细讲解。如有兴趣请点击第三部分《三种按钮的制作方法》继续阅读。CSS按钮制作方法系列_三种按钮的制作方法CSS按钮制作方法系列_三种按钮的制作方法来源：黄超[点击放大]本文是CSS按钮的制作方法系列文章第三部分：三种按钮的制作方法。在上篇文章中，我提到了三种按钮，它们是用和html代码input制作的按钮、用button制作的按钮和用链接标签a制作的按钮。本篇文章将讲解三种按钮的制作方法。其实按钮的制作并不难，在前面的文章中我也曾提到过，可以参阅《用CSS制作个性化按钮》这篇文章。这篇文章中只提到了用input制作按钮，但这次文章中还涉及了button和a的用法，所以会进行更全面的介绍。先请看上面图中所示，最左侧的一排是没有用CSS修饰的源代码input、button、a预览时的原始样式，要想让它们成为最右侧的按钮样式必须经过CSS修饰才可以。下面就开始制作步骤。在图中从上至下的Html代码是：inputtype=submitname=Submitvalue=提交表单/br/br/button在线申请/buttonbr/br/ahref=#target=_blank点击阅读/abr/br/将上面的代码复制到网页源代码中，在浏览器中预览一下，效果应该如上图中所示。下面就开始利用CSS对按钮进行修饰。CSS代码如下：styletype=text/css!--body,td,th{font-size:18px;/*定义了页面中全部字体*/color:#FFF;font-weight:bold;}input,button{/*同时定义input和button两个的属性*/width:138px;height:41px;border:0;/*边框属性必加，否则按钮会带黑色边框*/text-align:center;line-height:41px;/*文字行高*/必须和高度相同，文字才能垂直居中background:url(btnbg1.jpg);font-size:18px;color:#FFF;font-weight:bold;cursor:pointer;/*鼠标指到按钮上时的状态*/}a,a:link,a:visited{/*将链接定义成按钮的样式*/display:block;/*必须加，否则无法定义宽度和高度*/width:138px;height:41px;line-height:41px;/*为了文字垂直居中*/text-align:center;border:0;background:url(btnbg1.jpg);font-size:18px;color:#FFF;font-weight:bold;text-decoration:none;}--/style经过上面的CSS修饰，三个按钮就会变成上图最右边那排按钮的样式，但要注意CSS中的背景图片路径。到这里，三种按钮的简单制作方法就算完成了，如果想为按钮的效果升级或学习更高级的制作方法请继续关注下篇文章《第四部分：按钮的高级制作方法，增强特效的方法等》。CSS按钮的制作方法系列文章-按钮特效css按钮特效来源：黄超[点击放大]本文是CSS按钮的制作方法系列文章第四部分：按钮的高级制作方法，增强特效等。在上篇文章中，讲解了三种按钮的制作方法，三者最终完成效果相同。为了优化增强网站与用户的交互体验，给网页中的按钮加上一些特效是非常友好的选择，比如一些突出的修饰效果、翻转效果等。一提到翻转效果，自然会联想起鼠标悬浮状态和点击后状态。在input、button、a三种按钮的制作方法中，鼠标悬浮时翻转效果制作起来都不难，但最简单的还要属a标签，因为它仅用:hover、:active两个伪类就可以完成效果制作。虽然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代码请参阅上篇文章《三种按钮的制作方法》，btnbg2.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);}二、修饰图片在按钮上添加一些修饰图片也可以起到突出按钮的作用，比如上图中最下面的按钮，上面多了一个绿色的小对勾，在无形间多少勾起了用户的点击欲望。使用input和a标签制作方法，这个效果只需要使用背景图就能搞定，但使用button方法制作则更为简单，只需要准备一张小小的透明对勾图片，然后将图片插入到Html代码的button与/button之间即可，比如：buttonimgsrc=gou.gifwidth=16height=12/在线申请/button三、滑动门效果利用滑动门效果，可以让按钮的长度根据按钮中的文字长度自动伸展，具体制作方法可以参考《滑动门效果及其制作方法》这篇文章。到这里，几种按钮的特效部分就算完成了，如果想在制作方面和显示效果方面有更多提高，请继续关注下篇文章《第五部分：其它按钮特效及制作方法》。CSS按钮的制作方法系列文章-其它按钮特效css3圆角按钮来源：smashingmagzine[点击放大]本文是CSS按钮的制作方法系列文章第五部分：其它按钮特效以及制作方法等。在前面的文章中，已经讲了按钮和链接的主要区别，不同的作用以及不同的制作费方法等。本文将向您介绍一些按钮的特殊效果及制作方法。为了追求比较好的显示效果和精简的结构源代码，许多制作者会采用一些以前系列文章中没有用到的方法，比如CSS3和CSSSprite。CSS3在按钮制作中的应用windows默认浏览器中的按钮几乎都是直角形状的，如果欲将网页中的按钮做成圆角，原来只能靠背景图来完成，但现在或者不久的将来就可以使用CSS3来完成了。如上图中所示，方法1中可以使用背景图和边框可以定义按钮的样式；方法2中使用Firefox和webkit核心浏览器的特有CSS样式也可定义按钮样式，这个方法和CSS3相同，目前只有少量浏览器支持，但以后应该可以广泛应用，示例：input,button{border-radius:50px25px;}具体方法可查看这篇文章《CSS3新体验之一_圆角效果》。csssprite背景图来源：黄超[点击放大]CSSSprite在按钮制作中的应用上篇文章中已经给（链接）按钮加上了鼠标悬浮状态和点击后状态，但有时候鼠标悬浮在按钮上时背景会发生闪烁现象，这是由于鼠标触发翻转效果时页面需要立即读取CSS中的背景图片，造成短暂的空白间隙。使用一张同时包含按钮的默认状态、鼠标悬浮状态和点击过后状态的背景图片，利用CSS背景属性进行定义，可以有效解决这个问题，这就是CSSSprite技术。使用CSSSprite技术，重要的就是CSS背景属性和背景图片的准确使用，首先将图片制作好，如上图所示。然后在