我们从自然手上收到的最大礼物就是生命。我必须拼命的奔跑我知道有很多人等着看我狼狈跌倒的下场嘲笑我不自量力
效果图如下： 源码如下：
复制代码
代码如下:<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
#container {
margin: 120px auto;
text-align: center;
}
.button {
-webkit-transform: rotateX( 35deg );
position: relative;
display: inline-block;
width: 100px;
padding: 42px 15px;
margin: 0px 10px;
background-color: #C91826;
color: #fff;
font-weight: bold;
font-size: 40px;
text-decoration: none;
text-align: center;
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
border: 1px solid;
border-color: #B21522;
border-radius: 78px;
-moz-border-radius: 78px;
-webkit-border-radius: 78px;
box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2),
inset 0px 1px 5px rgba(255,255,255,0.2),
/**/
0px 12px 0px #231F20,
0px 14px 0px #231F20,
0px 16px 0px #231F20,
/**/
0px 8px 5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px -4px 5px rgba(255,255,255,0.2),
inset 0px 1px 5px rgba(255,255,255,0.2),
/**/
0px 12px 0px #231F20,
0px 14px 0px #231F20,
0px 16px 0px #231F20,
/**/
0px 8px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 5px -4px 5px rgba(255,255,255,0.2),
inset 5px 1px 5px rgba(255,255,255,0.2),
/**/
0px 12px 0px #231F20,
0px 14px 0px #231F20,
0px 16px 0px #231F20;
}
.button:hover {
background-color: #B21522;
color: #e3e3e3;
}
.button:active {
top: 8px;
box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
inset 0px -1px 5px rgba(255,255,255,0.2),
/**/
0px 8px 0px #231F20,
/**/
0px 9px 5px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
inset 0px -1px 5px rgba(255,255,255,0.2),
/**/
0px 8px 0px #231F20,
/**/
0px 9px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 0px 4px 5px rgba(255,255,255,0.4),
inset 0px -1px 5px rgba(255,255,255,0.2),
/**/
0px 8px 0px #231F20,
/**/
0px 9px 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div id="container">
<a rel="nofollow noopener noreferrer" href="#" class="button">开始</a>
<a rel="nofollow noopener noreferrer" href="#" class="button">结束</a>
</div>
</body>
</html>
到此这篇关于如何利用css3制作3D样式按钮如何实现代码就介绍到这了。不为失败找借口，只为成功找方法。更多相关如何利用css3制作3D样式按钮如何实现代码内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
