核心提示：由于经常会用到写按钮的一些样式，经常要重新写，不如保存一次，以后直接到这里拿。运行的效果图是这样的： 这是全部的代码，直接复制走就可以运行了。!DOCTYPE htmlhtml lang=enhead...
由于经常会用到写按钮的一些样式，经常要重新写，不如保存一次，以后直接到这里拿。
运行的效果图是这样的：
这是全部的代码，直接复制走就可以运行了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0; padding: 0;}
.container{
margin: 0 auto;
padding-top: 30px;
width: 1000px;
}
.btn{
display: inline-block;
padding: 0 30px;
width: auto;
height: 35px;
font: 14px/35px 'microsoft yahei';
color: #fff; border: 0;
border-radius: 3px;
text-align: center;
cursor: pointer;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.blueBtn{
background: #5dcbff;
} /*蓝色按钮*/
.blueBtn:hover{
background: #40b6ee;
}
.orangeBtn{
background: #ff5700;
}/*橙色按钮*/
.orangeBtn:hover{
background: #e25d18;
}
.violetBtn{
background: #6680ff;
}/*紫色按钮*/
.violetBtn:hover{
background: #425de0;
}
.grayBtn{
background: #999;
}/*灰色按钮*/
.grayBtn:hover{
background: #7f7f7f;
}
</style>
</head>
<body>
<p class="container">
<span class="btn blueBtn">蓝色按钮</span>
<span class="btn orangeBtn">橙色按钮</span>
<span class="btn violetBtn">紫色按钮</span>
<span class="btn grayBtn">灰色按钮</span>
</p>
</body>
</html>
