mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
55 lines
1.1 KiB
HTML
55 lines
1.1 KiB
HTML
<div class="container">
|
|
<input hidden="" id="check" name="check" type="checkbox">
|
|
<label class="toggle" for="check">
|
|
<div class="toggle__circle"></div>
|
|
</label>
|
|
<div class="toggle-text">
|
|
<span>N</span>
|
|
<span>F</span>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Creatlydev - Tags: switch, creative, toggle switch */
|
|
.container {
|
|
margin: auto;
|
|
color: hsl(0, 0%, 30%);
|
|
font-weight: 900;
|
|
font-size: 6rem;
|
|
display: flex;
|
|
}
|
|
|
|
.toggle {
|
|
width: 60px;
|
|
height: 155px;
|
|
background-color: hsl(0, 0%, 80%);
|
|
border-radius: 1.7rem;
|
|
padding: .25rem 0;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
transition: background-color 300ms 300ms;
|
|
}
|
|
|
|
.toggle__circle {
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: hsl(0, 0%, 95%);
|
|
border-radius: 50%;
|
|
margin-top: calc(155px - (.25rem * 2) - 50px);
|
|
transition: margin 500ms ease-in-out;
|
|
}
|
|
|
|
.toggle-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: .8;
|
|
}
|
|
|
|
#check:checked + .toggle > .toggle__circle {
|
|
margin-top: 0;
|
|
}
|
|
|
|
#check:checked + .toggle {
|
|
background-color: #41a63c;
|
|
}
|
|
</style>
|