css样式实现button按钮变色按钮变灰

发布时间:2020-10-03编辑:脚本学堂
如何用css实现button按钮变色、按钮变灰效果,使用css3.0的新样式属性实现按钮变灰,不了解的朋友参考下。

借助css3.0新样式属性实现按钮变灰,或按钮变色,得到一个漂亮的button按钮。

如果浏览器没有看到边角圆弧的样式,则浏览器版本不支持css3.0的新样式。

解决办法:
升级浏览器到最新的。

XP、Windows Server2003最高支持的是IE8(可以看到效果了),若不想升级IE,则要下载不是IE为内核的浏览器,比如火狐、谷歌、Opera等。

用到了css的伪元素,hover。

首先,在页面上,放一个input类型的button按钮。
对这个button按钮添加css样式代码。

css代码:
 

复制代码 代码示例:
.mybtn {
width:86px;
text-align:center;
line-height:100%;
padding-top:0.5em;
padding-right:2em;
padding-bottom:0.55em;
padding-left:2em;
font-family:Arial,sans-serif;
font-size:14px;
font-style:normal;
font-variant:normal;
font-weight:normal;
text-decoration:none;
margin-top:0px;
margin-right:2px;
margin-bottom:0px;
margin-left:2px;
vertical-align:text-bottom;
display:inline-block;
cursor:pointer;
zoom:1;
outline-width:medium;
outline-color:invert;
font-size-adjust:none;
font-stretch:normal;
border-top-left-radius:0.5em;
border-top-right-radius:0.5em;
border-bottom-left-radius:0.5em;
border-bottom-right-radius:0.5em;
box-shadow:0px 1px 2px rgba(0,0,0,0.2);
text-shadow:0px 1px 1px rgba(0,0,0,0.3);
color:#fefee9;
border-top-color:#da7c0c;
border-right-color:#da7c0c;
border-bottom-color:#da7c0c;
border-left-color:#da7c0c;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
background-image:none;
background-attachment:scroll;
background-repeat:repeat;
background-position-x:0%;
background-position-y:0%;
background-size:auto;
background-origin:padding-box;
background-clip:padding-box;
background-color:#f78d1d;
}

写好css样式,input的button按钮之后,把他们关联起来,只需要在input的button中添加class。
 

复制代码 代码示例:
<input type="button" class="mybtn" value="我是按钮" />

利用css的伪元素hover,mybtn的hover样式:
 

复制代码 代码示例:
.mybtn:hover {
background: #f47c20;
}
 

鼠标移上去只需要修改背景的颜色,只需要在hover样式中修改一个属性。