css3制作一个漂亮的按钮
浏览数：37 /
时间：2015年06月09日
特点：
1、圆角边框 border-radius
2、文字有背景 text-shadow
3、按钮有阴影 box-shadow
4、文字有向上的阴影 text-shadow
5、按钮背景色有个从上往下的渐变效果 linear-gradient
6、点击后明显有个下按效果
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>
.btn{
background-color: #ee432e;
background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%,#b51700 50%, #891100 100%);
background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%,#b51700 50%, #891100 100%);
background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
border: 1px solid #951100;
padding: 12px 20px 14px 20px;
border-radius: 5px;
text-decoration: none;
color: #fff;
font: bold 20px/1 “helvetica neue”, helvetica, arial, sans-serif;
text-align: center;
box-shadow: 0 1px 3px #333333;
text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
position:relative;
display:inline-block;
cursor:pointer;
}
.btn:active {
position: relative;
top: 1px;
}
</style>
<script src="script.js"></script>
</head>
<body>
<div class="btn">aaa</div>
</body>
</html>
有渐变还用 background-color的原因是当浏览器不支持渐变属性的时候显示背景色，这个就没有立体感了：
当然懒货可以用 http://css3button.net/ 来生成css3按钮：
改变字体大小，按钮大小也随之改变
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
