mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
104 lines
No EOL
2.1 KiB
HTML
104 lines
No EOL
2.1 KiB
HTML
<div class="container">
|
|
<label>
|
|
<input name="list" type="radio" />
|
|
<span>
|
|
<p class="a">Yes</p>
|
|
<p class="b">No</p>
|
|
</span>
|
|
Easy
|
|
</label>
|
|
<label>
|
|
<input checked="" name="list" type="radio" />
|
|
<span>
|
|
<p class="a">Yes</p>
|
|
<p class="b">No</p>
|
|
</span>
|
|
Normal
|
|
</label>
|
|
<label>
|
|
<input name="list" type="radio" />
|
|
<span>
|
|
<p class="a">Yes</p>
|
|
<p class="b">No</p>
|
|
</span>
|
|
Hard
|
|
</label>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by javierBarroso - Tags: animation, 3d, button, modern, radio, toggle */
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.container label {
|
|
transform-style: preserve-3d;
|
|
perspective: 100px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
}
|
|
.container label span {
|
|
position: relative;
|
|
margin-right: 0px;
|
|
width: 60px;
|
|
height: 40px;
|
|
transform: rotateY(180deg);
|
|
transition-duration: 0.6s;
|
|
margin: 0 10px 0 10px;
|
|
transform-style: preserve-3d;
|
|
perspective: 100px;
|
|
padding: 0px;
|
|
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
background: #111;
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
box-shadow:
|
|
inset 2px 2px 2px #fff9,
|
|
5px 5px 5px #2225;
|
|
}
|
|
.container label span p {
|
|
position: absolute;
|
|
transform-origin: 50% 50%;
|
|
left: 0%;
|
|
right: 0%;
|
|
transform: translateX(50px) translateY(50px);
|
|
font-weight: 600;
|
|
text-align: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 5;
|
|
font-size: 12px;
|
|
text-shadow: 0 0 2px;
|
|
}
|
|
.container label span .a {
|
|
backface-visibility: visible;
|
|
color: green;
|
|
transform: translateX(0%) translateY(0%) translateZ(10px) rotateY(0deg);
|
|
}
|
|
.container label span .b {
|
|
backface-visibility: visible;
|
|
color: red;
|
|
transform: translateX(0%) translateY(0%) translateZ(-10px) rotateY(180deg);
|
|
}
|
|
|
|
.container label input[type="radio"] {
|
|
appearance: none;
|
|
}
|
|
|
|
.container label input[type="radio"]:checked ~ span {
|
|
box-shadow:
|
|
inset -2px 2px 2px #fff9,
|
|
-5px 5px 5px #2225;
|
|
transform: rotateY(0deg);
|
|
}
|
|
|
|
</style>
|
|
|