mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
80 lines
1.9 KiB
HTML
80 lines
1.9 KiB
HTML
<label class="container">
|
|
<input type="checkbox">
|
|
<div class="checkmark">
|
|
<svg xml:space="preserve" viewBox="0 0 49.548 49.549" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Capa_1" version="1.1">
|
|
<g>
|
|
<g>
|
|
<g>
|
|
<path d="M30.203,4.387v4.385c7.653,2.332,13.238,9.451,13.238,17.857c0,10.293-8.373,18.667-18.667,18.667
|
|
S6.106,36.922,6.106,26.629c0-8.405,5.585-15.525,13.238-17.857V4.387C9.323,6.835,1.855,15.866,1.855,26.629
|
|
c0,12.639,10.281,22.92,22.919,22.92s22.92-10.281,22.92-22.92C47.694,15.865,40.224,6.835,30.203,4.387z"></path>
|
|
</g>
|
|
<g>
|
|
<path d="M24.776,27.225c-1.41,0-2.554-1.145-2.554-2.555V2.554c0-1.41,1.144-2.554,2.554-2.554c1.41,0,2.554,1.144,2.554,2.554
|
|
V24.67C27.33,26.08,26.186,27.225,24.776,27.225z"></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</label>
|
|
<style>
|
|
/* From Uiverse.io by aadium - Tags: checkbox */
|
|
/* Hide the default checkbox */
|
|
.container input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.container {
|
|
display: block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Create a custom checkbox */
|
|
.checkmark {
|
|
position: relative;
|
|
height: 70px;
|
|
width: 70px;
|
|
border-radius: 10em;
|
|
background-color: #212121;
|
|
transition: 0.3s;
|
|
box-shadow: 6px 6px 10px #000000,
|
|
-6px -6px 10px #3c3c3c;
|
|
}
|
|
|
|
.checkmark svg {
|
|
width: 45px;
|
|
height: 45px;
|
|
margin-top: 11px;
|
|
margin-left: 12.5px;
|
|
fill: #264d39;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.checkmark:active {
|
|
box-shadow: 2px 2px 3px #000000,
|
|
-2px -2px 3px #3c3c3c;
|
|
}
|
|
|
|
/* When the checkbox is checked */
|
|
.container input:checked ~ .checkmark {
|
|
box-shadow: 4px 4px 6px #000000,
|
|
-4px -4px 6px #3c3c3c;
|
|
}
|
|
|
|
.container input:checked ~ .checkmark svg {
|
|
fill: #00ff7b;
|
|
}
|
|
|
|
.container input:checked ~ .checkmark:active {
|
|
box-shadow: 2px 2px 3px #000000,
|
|
-2px -2px 3px #3c3c3c;
|
|
}
|
|
</style>
|