Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как достигается такой эффект? (https://javascript.ru/forum/xhtml-html-css/73701-kak-dostigaetsya-takojj-ehffekt.html)

DobrovolskyDen 08.05.2018 10:43

Как достигается такой эффект?
 
Вложений: 1
Установил кнопку к себе на сайт и она приобрела вид фонового изображения.
Вот так это выглядит:
Вложение 3876
Подскажите пожалуйста, как достигается, такой эффект?

Вот 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;
}

Nexus 08.05.2018 11:25

Цитата:

Сообщение от DobrovolskyDen
Установил кнопку к себе на сайт и она приобрела вид фонового изображения.

Может у нее просто нет фона?

DobrovolskyDen 08.05.2018 13:03

Благодарю, понял)


Часовой пояс GMT +3, время: 22:32.