mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
131 lines
No EOL
2.6 KiB
HTML
131 lines
No EOL
2.6 KiB
HTML
<div class="switch demo3">
|
|
<input type="checkbox" />
|
|
<label><i></i></label>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by vikramsinghnegi - Tags: material design, animation, gradient, switch, on, off, toggle, figma */
|
|
.switch {
|
|
position: relative;
|
|
margin: 25px 20px;
|
|
}
|
|
|
|
.switch input {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
z-index: 100;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.switch.demo3 {
|
|
width: 180px;
|
|
height: 50px;
|
|
}
|
|
|
|
.switch.demo3 label {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #d8ba5f;
|
|
border-radius: 50px;
|
|
box-shadow: inset 0 4px 8px 2px rgba(248, 6, 6, 0.2),
|
|
0 1px 0 rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.switch.demo3 label:after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: -8px;
|
|
right: -8px;
|
|
bottom: -8px;
|
|
left: -8px;
|
|
border-radius: inherit;
|
|
background: #ababab;
|
|
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ababab));
|
|
background: -webkit-linear-gradient(#f2f2f2, #ababab);
|
|
background: linear-gradient(#f2f2f2, #ababab);
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.switch.demo3 label:before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
top: -18px;
|
|
right: -18px;
|
|
bottom: -18px;
|
|
left: -18px;
|
|
border-radius: inherit;
|
|
background: #eee;
|
|
background: linear-gradient(#e5e7e6, #eee);
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
filter: blur(1px);
|
|
}
|
|
|
|
.switch.demo3 label i {
|
|
display: block;
|
|
height: 100%;
|
|
width: 60%;
|
|
border-radius: inherit;
|
|
background: silver;
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: 40%;
|
|
top: 0;
|
|
background: #b2ac9e;
|
|
background: linear-gradient(#f7f2f6, #b2ac9e);
|
|
box-shadow: inset 0 1px 0 white, 0 0 8px rgba(0, 0, 0, 0.3),
|
|
0 5px 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.switch.demo3 label i:after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 15%;
|
|
top: 25%;
|
|
width: 70%;
|
|
height: 50%;
|
|
background: #d2cbc3;
|
|
background: linear-gradient(#cbc7bc, #d2cbc3);
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.switch.demo3 label i:before {
|
|
content: "off";
|
|
text-transform: uppercase;
|
|
font-style: normal;
|
|
font-weight: bold;
|
|
color: rgba(0, 0, 0, 0.4);
|
|
text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
font-size: 24px;
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: -12px;
|
|
right: -50%;
|
|
}
|
|
|
|
.switch.demo3 input:checked ~ label {
|
|
background: #9abb82;
|
|
}
|
|
|
|
.switch.demo3 input:checked ~ label i {
|
|
right: -1%;
|
|
}
|
|
|
|
.switch.demo3 input:checked ~ label i:before {
|
|
content: "on";
|
|
right: 115%;
|
|
color: #82a06a;
|
|
text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #111311;
|
|
}
|
|
|
|
</style>
|
|
|