mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
47 lines
830 B
HTML
47 lines
830 B
HTML
<div><input type="checkbox" id="ni">
|
|
<label for="ni" class="ni"></label></div>
|
|
|
|
|
|
<style>
|
|
/* From Uiverse.io by AnthonyPreite - Tags: red, green, minimalist, checkbox */
|
|
/* ni means name input*/
|
|
|
|
.ni {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
padding: 8px 20px;
|
|
border-radius: .8rem;
|
|
min-width: 124px;
|
|
text-align: center;
|
|
background: rgba(78, 190, 150, 0.1);
|
|
border: 0.5px solid rgba(22, 179, 124, 0.2);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ni:before {
|
|
content: "Check";
|
|
color: #4EBE96;
|
|
}
|
|
|
|
.ni:active {
|
|
transform: scale(0.94);
|
|
}
|
|
|
|
#ni {
|
|
position: fixed;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
#ni:checked + .ni {
|
|
background: rgba(216, 79, 104, 0.1);
|
|
border-color: rgba(216, 79, 104, 0.2);
|
|
}
|
|
|
|
#ni:checked + .ni:before {
|
|
content: "Uncheck";
|
|
color: #D84F68;
|
|
}
|
|
</style>
|