css按钮
如果CSS能够帮助我们实现不同状态下的样式，那么我们就可以借助这些特性制作具有交互特征的元素，如按钮。在操作系统中按钮大量存在，凸起状的按钮与按下时的按钮下凹效果非常的直观与方便，就像在真实的键盘一样。天津网站制作，塘沽网站建设，天津网络公司，我们可以结合前面所探讨的边框，背景及链接的四种状态来实现一个类似于Windows窗体的标准按钮，在本章的实例中我们将通过CSS分别实现Windows经典样式及Ⅺ，样式。
为了实现按钮效果，在目前实例中仅仅需要两个不同class的链接对象，而在CSS中则要对这个对象的4种状态分别进行样式编写。我们首先来实现经典样式的按钮效果。使最终效果能够体现，先将body设置成了灰色背a.class:hover是首次出现的一种新的复合型选择符。传统作法上对于a的hover属性只需要使用a:hover即可实现，而如果a对象定义了class或id，就需要将id及class选择符与hover伪类进行组合使用，并有了现在的a.class:hove的定义方式。对链接的设置中，我们使用display:block;使链接成为一个盒状对象，以方便使用相关样式。对于凸起的按钮而言，之所以能够让我们有按钮的感觉，主要是因为对按钮的四个边框进行了颜色的设置，使上边框和左边框为白色，就像光线从左上方照下一样，使他的右边和下边框呈灰色，就像光线没照到的地方呈现出的阴影。因此按钮的视觉设计实际上是对智物光源反映的表现，包含更丰富的塑料感，金属感，无不例为是对光线的应用。在简单的Windows经典风格按钮中，也延用Windows风格的颜色设置，使上下左右4个边框呈现出了颜色，最袭终的效果就像是一个按钮一样。
而对于a.classic:active的样式定义，则是对按钮按下状态的表现。前面曾经谈到在实际网站设计中，active状态并不是非常常用，但是一旦你的网站需要按钮风格的话，active属性上用场了。在active状态下，我们将对象的光线给反过来，使上边框和左边框呈现为灰色，右边框和下边框呈现为白色，因此感觉上就像是按钮被按下了一样。而在a.classic:hover的设置中，我们对背景色进行了稍微的提亮，使得用户鼠标悬停时会有色彩变化。这样一套仿Windows经典样式的按钮就设计完成了，完全使用CSS的标准样式属性构建，看一下预览效果
Windows经典样式的实际是基于对CSS中border的颜色控制，那么如果要设计XP风格样式按钮的话，就得使用图片样式来控制了，我们的实例中还有一个class为XP的按钮需要样式定义，在设定样式之前，需要准备三张分别表示link，hover及active三个状态的gif图片，然后在hover中进行调用，最终的CSS代码如下：通过在3种状态下的三张背景图片，实现了鼠标交互的几个状态效果。看一下最终的显示效果，已经与Ⅺ，完全一致。比较一下经典样式的按钮，是不是感觉要好了不少？基本类似WindowsⅪ’的系统界面。链接按钮效果在实际应用中还是经常能够用到的，特别是如果我们制作B/$结构的专软件u1设计的话，：UI设计中对按钮的需求很多，无论是使用Windows风格来进行UI设计还键创造自己的B/S软件界面．使用CSS来完成按钮的设计都是一个非常简单快捷的工作，不过目前针对Winddows Yd式设计的按钮存在一个非常致命的缺陷，就是当按钮文字变长时，图片却只有一套，能根据按钮文本的增长而自动增长，能不能解决这样的问题呢？答案是肯定的。实现自蔬动适碡应的样式编码也是我们做Web标准网站中需要经常考虑的事情，在后面CSS高级技巧中提供一项新的技术帮助大家完善）风格按钮的设计。