mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
46 lines
1.3 KiB
HTML
46 lines
1.3 KiB
HTML
<input class="togglesw" type="checkbox">
|
|
<style>
|
|
/* From Uiverse.io by csemszepp - Source: https://codepen.io/t_afif/pen/PoEebrz - Tags: switch, toggle, toggle switch */
|
|
.togglesw {
|
|
--s: 50px;
|
|
/* adjust this to control the size*/
|
|
height: calc(var(--s) + var(--s)/5);
|
|
width: auto;
|
|
/* some browsers need this */
|
|
aspect-ratio: 2.25;
|
|
border-radius: var(--s);
|
|
margin: calc(var(--s)/2);
|
|
display: grid;
|
|
cursor: pointer;
|
|
background-color: #ff7a7a;
|
|
box-sizing: content-box;
|
|
overflow: hidden;
|
|
transition: .3s .1s;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.togglesw:before {
|
|
content: "";
|
|
padding: calc(var(--s)/10);
|
|
--_g: radial-gradient(circle closest-side at calc(100% - var(--s)/2) 50%,#000 96%,#0000);
|
|
background: var(--_g) 0 /var(--_p,var(--s)) 100% no-repeat content-box,
|
|
var(--_g) var(--_p,0)/var(--s) 100% no-repeat content-box,
|
|
#fff;
|
|
mix-blend-mode: darken;
|
|
filter: blur(calc(var(--s)/12)) contrast(11);
|
|
transition: .4s, background-position .4s .1s,
|
|
padding cubic-bezier(0,calc(var(--_i,-1)*200),1,calc(var(--_i,-1)*200)) .25s .1s;
|
|
}
|
|
|
|
.togglesw:checked {
|
|
background-color: #85ff7a;
|
|
}
|
|
|
|
.togglesw:checked:before {
|
|
padding: calc(var(--s)/10 + .05px) calc(var(--s)/10);
|
|
--_p: 100%;
|
|
--_i: 1;
|
|
}
|
|
</style>
|