* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background: #4e5d74;
background: linear-gradient(#54647d, #313946);
height: 100%;
}
.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;
}