mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
121 lines
3 KiB
HTML
121 lines
3 KiB
HTML
<div class="checkbox-wrapper">
|
|
<input id="_checkbox-26" type="checkbox">
|
|
<label for="_checkbox-26">
|
|
<div class="tick_mark"></div>
|
|
</label>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
/* From Uiverse.io by PriyanshuGupta28 - Tags: checkbox, toggle switch, cool switch, tick mark swicth */
|
|
.checkbox-wrapper * {
|
|
-webkit-tap-highlight-color: transparent;
|
|
outline: none;
|
|
}
|
|
|
|
.checkbox-wrapper input[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
|
|
.checkbox-wrapper label {
|
|
--size: 50px;
|
|
--shadow: calc(var(--size) * .07) calc(var(--size) * .1);
|
|
position: relative;
|
|
display: block;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
margin: 0 auto;
|
|
background-color: #4158D0;
|
|
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
|
|
border-radius: 50%;
|
|
box-shadow: 0 var(--shadow) #ffbeb8;
|
|
cursor: pointer;
|
|
transition: 0.2s ease transform, 0.2s ease background-color,
|
|
0.2s ease box-shadow;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
.checkbox-wrapper label:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0;
|
|
left: 0;
|
|
width: calc(var(--size) * .7);
|
|
height: calc(var(--size) * .7);
|
|
margin: 0 auto;
|
|
background-color: #fff;
|
|
transform: translateY(-50%);
|
|
border-radius: 50%;
|
|
box-shadow: inset 0 var(--shadow) #ffbeb8;
|
|
transition: 0.2s ease width, 0.2s ease height;
|
|
}
|
|
|
|
.checkbox-wrapper label:hover:before {
|
|
width: calc(var(--size) * .55);
|
|
height: calc(var(--size) * .55);
|
|
box-shadow: inset 0 var(--shadow) #ff9d96;
|
|
}
|
|
|
|
.checkbox-wrapper label:active {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.checkbox-wrapper .tick_mark {
|
|
position: absolute;
|
|
top: -1px;
|
|
right: 0;
|
|
left: calc(var(--size) * -.05);
|
|
width: calc(var(--size) * .6);
|
|
height: calc(var(--size) * .6);
|
|
margin: 0 auto;
|
|
margin-left: calc(var(--size) * .14);
|
|
transform: rotateZ(-40deg);
|
|
}
|
|
|
|
.checkbox-wrapper .tick_mark:before,
|
|
.checkbox-wrapper .tick_mark:after {
|
|
content: "";
|
|
position: absolute;
|
|
background-color: #fff;
|
|
border-radius: 2px;
|
|
opacity: 0;
|
|
transition: 0.2s ease transform, 0.2s ease opacity;
|
|
}
|
|
|
|
.checkbox-wrapper .tick_mark:before {
|
|
left: 0;
|
|
bottom: 0;
|
|
width: calc(var(--size) * .1);
|
|
height: calc(var(--size) * .3);
|
|
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
|
|
transform: translateY(calc(var(--size) * -.68));
|
|
}
|
|
|
|
.checkbox-wrapper .tick_mark:after {
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: calc(var(--size) * .1);
|
|
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
|
|
transform: translateX(calc(var(--size) * .78));
|
|
}
|
|
|
|
.checkbox-wrapper input[type="checkbox"]:checked + label {
|
|
background-color: #4158D0;
|
|
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
|
|
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
|
|
}
|
|
|
|
.checkbox-wrapper input[type="checkbox"]:checked + label:before {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.checkbox-wrapper input[type="checkbox"]:checked + label .tick_mark:before,
|
|
.checkbox-wrapper input[type="checkbox"]:checked + label .tick_mark:after {
|
|
transform: translate(0);
|
|
opacity: 1;
|
|
}
|
|
</style>
|