<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3的按钮效果</title>
<style type="text/css">
*{margin:0;padding:0;}
#box{
width:400px;height:200px;
background-color:#ccf;
margin:100px auto;
border-radius:50%;
box-shadow: 0 -15px 15px #88f inset,
10px -15px 15px #44f inset,
-10px -15px 15px #fff inset,
0 15px #88f,
-35px 40px 5px rgba(0,0,0,0.3);
font:40px "微软雅黑";
text-align:center;
line-height:150px;
letter-spacing: 5px;
font-weight: bold;
color:#88f;
}
.content{
text-shadow: 3px -3px 1px #44f,-3px 3px 1px #fff;
transform: scale(1,0.5);
}
#box:hover{
box-shadow:
0 -15px 15px #88f inset,
10px -15px 15px #44f inset,
-10px -15px 15px #fff inset,
0 2px #88f,
-8px 15px 5px rgba(0,0,0,0.3);
margin-top:115px;
}
.other{
text-align: center;
line-height:50px;
}
</style>
</head>
<body>
<div id="box">
<div class="content">艾尚编程</div>
</div>
<div class="other">艾尚编程工作室:学习的demo</div>
</body>
</html>