纯CSS3实现3D开机按钮是一款利用纯CSS3实现的3D开机按钮,这款按钮并没有惊人的动画效果,但是却利用了CSS3的许多特性给按钮添加了阴影以及光泽,让按钮显得非常立体。
.wrapper
{
width: 150px;
height: 150px;
margin: 60px auto;
border-radius: 50%;
background: #b25244;
background: linear-gradient(#b25244, #5e1912);
position: relative;
cursor: pointer;
padding: 20px;
box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.13), 0 5px 8px rgba(0, 0, 0, 0.5), 0 10px 10px 4px rgba(0, 0, 0, 0.3);
}
.wrapper:after
{
content: "";
position: absolute;
left: -20px;
right: -20px;
top: -20px;
bottom: -20px;
z-index: -2;
border-radius: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.15);
}
.wrapper:before
{
content: "";
position: absolute;
left: -10px;
right: -10px;
top: -10px;
bottom: -10px;
z-index: -1;
border-radius: inherit;
box-shadow: inset 0 10px 10px rgba(0, 0, 0, 0.13);
-webkit-filter: blur(1px);
filter: blur(1px);
}
.inner
{
position: relative;
width: 100%;
height: 100%;
border-radius: inherit;
background: linear-gradient(#8a2c20, #9e4235);
display: block;
box-shadow: 0 -2px 5px rgba(255, 255, 255, 0.05), 0 2px 5px rgba(255, 255, 255, 0.1);
}
.inner:after
{
position: absolute;
width: 50px;
height: 50px;
background: white;
background: linear-gradient(#eaeceb, #8d8d8d);
left: 50%;
top: 50%;
content: "";
border-radius: inherit;
margin: -25px 0 0 -25px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
.inner:before
{
position: absolute;
content: "";
width: 40px;
height: 40px;
left: 50%;
top: 50%;
border-radius: inherit;
background: inherit;
margin: -20px 0 0 -20px;
z-index: 2;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3), 0 1px 2px white;
}
.inner span
{
display: block;
width: 20px;
height: 20px;
background: #8f3327;
position: absolute;
left: 50%;
margin-left: -10px;
top: 25px;
z-index: 3;
position: relative;
}
.inner span:before
{
content: "";
position: absolute;
width: 6px;
height: 25px;
background: linear-gradient(#ffffff, #cbcbcd);
border-radius: 10px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
left: 50%;
margin-left: -3px;
}