利用css3制作3D样式按钮实现代码

前端技术 2023/09/02 CSS
效果图如下：

源码如下：

复制代码
代码如下:

<!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 href=\"#\" class=\"button\">开始</a>
<a href=\"#\" class=\"button\">结束</a>
</div>
</body>
</html>

本文地址：https://www.stayed.cn/item/3286

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案