手把手教你用css让你的button按钮变色

首先我们来看一下最后的效果图把：

这个就是我们最好的目标。如果敢兴趣的话好吧，那你继续看吧。

首先这个按钮有用到css3.0的新样式属性。如果你的浏览器没有看到边角圆弧的样式，那就说明你的浏览器版本不支持css3.0的新样式。解决办法，升级浏览器到最新的。据我所知XP、Windows Server2003最高支持的是IE8（可以看到效果了），如果你不想升级IE，那们你可要下载不是IE为内核的浏览器，比如火狐、谷歌、Opera等等。

好了前面这么多废话，我们该看一下如何做出我们漂亮的按钮吧。

其实我们这里用到了css的伪元素，hover。

首先我们必须在页面上，放一个input类型的button按钮。对这个button按钮进行css的样式的添加。

具体的css代码如下：

 1 .mybtn {
 2     width:86px;
 3     text-align:center;
 4     line-height:100%;
 5     padding-top:0.5em;
 6     padding-right:2em;
 7     padding-bottom:0.55em;
 8     padding-left:2em;
 9     font-family:Arial,sans-serif;
10     font-size:14px;
11     font-style:normal;
12     font-variant:normal;
13     font-weight:normal;
14     text-decoration:none;
15     margin-top:0px;
16     margin-right:2px;
17     margin-bottom:0px;
18     margin-left:2px;
19     vertical-align:text-bottom;
20     display:inline-block;
21     cursor:pointer;
22     zoom:1;
23     outline-width:medium;
24     outline-color:invert;
25     font-size-adjust:none;
26     font-stretch:normal;
27     border-top-left-radius:0.5em;
28     border-top-right-radius:0.5em;
29     border-bottom-left-radius:0.5em;
30     border-bottom-right-radius:0.5em;
31     box-shadow:0px 1px 2px rgba(0,0,0,0.2);
32     text-shadow:0px 1px 1px rgba(0,0,0,0.3);
33     color:#fefee9;
34     border-top-color:#da7c0c;
35     border-right-color:#da7c0c;
36     border-bottom-color:#da7c0c;
37     border-left-color:#da7c0c;
38     border-top-width:1px;
39     border-right-width:1px;
40     border-bottom-width:1px;
41     border-left-width:1px;
42     border-top-style:solid;
43     border-right-style:solid;
44     border-bottom-style:solid;
45     border-left-style:solid;
46     background-image:none;
47     background-attachment:scroll;
48     background-repeat:repeat;
49     background-position-x:0%;
50     background-position-y:0%;
51     background-size:auto;
52     background-origin:padding-box;
53     background-clip:padding-box;
54     background-color:#f78d1d;
55 }

具体的css样式解释还是百度一下吧，这样可以提高你的css水平。如果你不懂css技能，但是想用到这样的效果，那需要修改的就是按钮的width，设置成自己按钮合适的宽度。还有一个就是背景颜色的替换了。

写好css样式，写好input的button按钮之后，我们应该把他们关联起来，只需要在input的button中添加class。
<input type="button" class="mybtn" value="我是按钮" />

现在我们还差最后一部了，就是利用css的伪元素hover，

在写一句mybtn的hover样式。代码如下：

.mybtn:hover {
    background: #f47c20;
}

因为我们鼠标移上去只需要修改背景的颜色，那么我们只需要在hover样式中修改一个属性。

好了。看一下我们的按钮吧。是不是很好看。哈哈哈

posted @ 2012-11-20 12:49  唯吴独尊  阅读(71819)  评论(2)  编辑  收藏  举报