Установил кнопку к себе на сайт и она приобрела вид фонового изображения.
Вот так это выглядит:
кнопка.jpg
Подскажите пожалуйста, как достигается, такой эффект?
Вот Css:
.switch {
display: block;
position: fixed;
width: 70px;
height: 100px;
margin-top: 170px;
margin-left: 900px;
border-radius: 70px;
background: #6A5928,
background: linear-gradient(#6A5928, #fdfdfd);
border: 1px solid rgba(0,0,0,0.1);
box-shadow:
0 12px 13px rgba(49,18,14,.6);
cursor: pointer;
}
.switch:before {
content: "";
position: absolute;
top: -10px; bottom: -10px;
left: -5px; right: -5px;
z-index: -1;
background: #6A5928,
border-radius: inherit;
box-shadow:
10px 1px 1px rgba(#aea391,4),
10px 13px 13px rgba(170, 160, 140, 4),
10px 10px 5px rgba(196,196,196, 5);
}
.switch:after {
content: "";
width: 60px;
height: 70px;
border-radius: 50%;
z-index: -1;
left: 18px;
top: 10px;
background: #6A5928;
-webkit-filter: blur(5px);
}
#switch {
clip: rect(0 0 0 0);
visibility: hidden;
}
#switch:checked ~ .switch {
background: #C4C4C4;
box-shadow:
10px 6px 5px rgba(196,196,196,.10),
10px 10px 5px rgba(196,196,196,.10);
border: 5px;
}
#switch:checked ~ .switch:after {
display: none;
}
