mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
185 lines
6.9 KiB
HTML
185 lines
6.9 KiB
HTML
<div class="container">
|
|
<div class="line"></div>
|
|
<label for="alien" class="label">
|
|
<input checked="" name="future-is-here" type="radio" id="alien">
|
|
<div class="button">
|
|
<span class="shadow"></span>
|
|
<span class="edge"></span>
|
|
<span class="front text">
|
|
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2a8.5 8.5 0 0 1 8.5 8.5c0 6.5-5.5 12-8.5 12s-8.5-5.5-8.5-12A8.5 8.5 0 0 1 12 2zm0 2a6.5 6.5 0 0 0-6.5 6.5c0 4.794 4.165 10 6.5 10s6.5-5.206 6.5-10A6.5 6.5 0 0 0 12 4zm5.5 7c.16 0 .319.008.475.025a4.5 4.5 0 0 1-4.95 4.95A4.5 4.5 0 0 1 17.5 11zm-11 0a4.5 4.5 0 0 1 4.475 4.975 4.5 4.5 0 0 1-4.95-4.95C6.18 11.008 6.34 11 6.5 11z" fill="currentColor"></path></svg>
|
|
</span>
|
|
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="pop"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2a8.5 8.5 0 0 1 8.5 8.5c0 6.5-5.5 12-8.5 12s-8.5-5.5-8.5-12A8.5 8.5 0 0 1 12 2zm0 2a6.5 6.5 0 0 0-6.5 6.5c0 4.794 4.165 10 6.5 10s6.5-5.206 6.5-10A6.5 6.5 0 0 0 12 4zm5.5 7c.16 0 .319.008.475.025a4.5 4.5 0 0 1-4.95 4.95A4.5 4.5 0 0 1 17.5 11zm-11 0a4.5 4.5 0 0 1 4.475 4.975 4.5 4.5 0 0 1-4.95-4.95C6.18 11.008 6.34 11 6.5 11z" fill="currentColor"></path></svg>
|
|
</div>
|
|
</label>
|
|
<label for="bear" class="label">
|
|
<input name="future-is-here" type="radio" id="bear">
|
|
<div class="button">
|
|
<span class="shadow"></span>
|
|
<span class="edge"></span>
|
|
<span class="front text">
|
|
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M17.5 2a4.5 4.5 0 0 1 2.951 7.897c.355.967.549 2.013.549 3.103A9 9 0 1 1 3.55 9.897a4.5 4.5 0 1 1 6.791-5.744 9.05 9.05 0 0 1 3.32 0A4.494 4.494 0 0 1 17.5 2zm0 2c-.823 0-1.575.4-2.038 1.052l-.095.144-.718 1.176-1.355-.253a7.05 7.05 0 0 0-2.267-.052l-.316.052-1.356.255-.72-1.176A2.5 2.5 0 1 0 4.73 8.265l.131.123 1.041.904-.475 1.295A7 7 0 1 0 19 13c0-.716-.107-1.416-.314-2.083l-.112-.33-.475-1.295 1.04-.904A2.5 2.5 0 0 0 17.5 4zM10 13a2 2 0 1 0 4 0h2a4 4 0 1 1-8 0h2z" fill="currentColor"></path></svg>
|
|
</span>
|
|
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="pop"><path d="M0 0h24v24H0z" fill="none"></path><path d="M17.5 2a4.5 4.5 0 0 1 2.951 7.897c.355.967.549 2.013.549 3.103A9 9 0 1 1 3.55 9.897a4.5 4.5 0 1 1 6.791-5.744 9.05 9.05 0 0 1 3.32 0A4.494 4.494 0 0 1 17.5 2zm0 2c-.823 0-1.575.4-2.038 1.052l-.095.144-.718 1.176-1.355-.253a7.05 7.05 0 0 0-2.267-.052l-.316.052-1.356.255-.72-1.176A2.5 2.5 0 1 0 4.73 8.265l.131.123 1.041.904-.475 1.295A7 7 0 1 0 19 13c0-.716-.107-1.416-.314-2.083l-.112-.33-.475-1.295 1.04-.904A2.5 2.5 0 0 0 17.5 4zM10 13a2 2 0 1 0 4 0h2a4 4 0 1 1-8 0h2z" fill="currentColor"></path></svg>
|
|
</div>
|
|
</label>
|
|
<label for="mickey" class="label">
|
|
<input name="future-is-here" type="radio" id="mickey">
|
|
<div class="button">
|
|
<span class="shadow"></span>
|
|
<span class="edge"></span>
|
|
<span class="front text">
|
|
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M18.5 2a4.5 4.5 0 0 1 .883 8.913l.011.027a8 8 0 0 1-7.145 11.056L12 22a8 8 0 0 1-7.382-11.088A4.499 4.499 0 0 1 5.5 2a4.5 4.5 0 0 1 4.493 4.254l.073-.019A8.018 8.018 0 0 1 12 6l.25.004a8 8 0 0 1 1.756.25A4.5 4.5 0 0 1 18.5 2zM12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM5.5 4a2.5 2.5 0 0 0 0 5l.164-.005.103-.01A8.044 8.044 0 0 1 7.594 7.32l.33-.206A2.5 2.5 0 0 0 5.5 4zm13 0a2.5 2.5 0 0 0-2.466 2.916l.043.2.028.016a8.04 8.04 0 0 1 2.128 1.852A2.5 2.5 0 1 0 18.5 4z" fill="currentColor"></path></svg>
|
|
</span>
|
|
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="pop"><path d="M0 0h24v24H0z" fill="none"></path><path d="M18.5 2a4.5 4.5 0 0 1 .883 8.913l.011.027a8 8 0 0 1-7.145 11.056L12 22a8 8 0 0 1-7.382-11.088A4.499 4.499 0 0 1 5.5 2a4.5 4.5 0 0 1 4.493 4.254l.073-.019A8.018 8.018 0 0 1 12 6l.25.004a8 8 0 0 1 1.756.25A4.5 4.5 0 0 1 18.5 2zM12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM5.5 4a2.5 2.5 0 0 0 0 5l.164-.005.103-.01A8.044 8.044 0 0 1 7.594 7.32l.33-.206A2.5 2.5 0 0 0 5.5 4zm13 0a2.5 2.5 0 0 0-2.466 2.916l.043.2.028.016a8.04 8.04 0 0 1 2.128 1.852A2.5 2.5 0 1 0 18.5 4z" fill="currentColor"></path></svg>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by adamgiebl - Tags: skeuomorphism, realistic, neon, radio */
|
|
.container {
|
|
display: flex;
|
|
position: relative;
|
|
gap: 4px;
|
|
color: white;
|
|
}
|
|
|
|
.container input[type="radio"] {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.container input[type="radio"]:checked + .button {
|
|
opacity: 1;
|
|
}
|
|
|
|
.container input[type="radio"]:checked + .button .pop {
|
|
animation: fly-up 0.5s ease-in-out;
|
|
}
|
|
|
|
.button {
|
|
position: relative;
|
|
border: none;
|
|
background: transparent;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
outline-offset: 4px;
|
|
transition: filter 250ms;
|
|
user-select: none;
|
|
touch-action: manipulation;
|
|
width: 50px;
|
|
border-radius: 30px;
|
|
height: 50px;
|
|
opacity: 0.4;
|
|
box-shadow: 0px 0px 40px -5px hsl(170deg 100% 40%);
|
|
}
|
|
|
|
.button .pop {
|
|
width: 22px;
|
|
height: 22px;
|
|
position: absolute;
|
|
display: block;
|
|
left: 50%;
|
|
z-index: -1;
|
|
transform: translate(-50%, 0);
|
|
top: 0;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
@keyframes fly-up {
|
|
0% {
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
50% {
|
|
transform: translate(-50%, -40px);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(-50%, 0);
|
|
}
|
|
}
|
|
|
|
.button .shadow {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12px;
|
|
background: hsl(0deg 0% 0% / 0.25);
|
|
will-change: transform;
|
|
transform: translateY(2px);
|
|
transition: all
|
|
600ms
|
|
cubic-bezier(.3, .7, .4, 1);
|
|
}
|
|
|
|
.button .edge {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12px;
|
|
background: linear-gradient(
|
|
to left,
|
|
hsl(170deg 100% 16%) 0%,
|
|
hsl(170deg 100% 32%) 8%,
|
|
hsl(170deg 100% 32%) 92%,
|
|
hsl(170deg 100% 16%) 100%
|
|
);
|
|
}
|
|
|
|
.button .front {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12px;
|
|
font-size: 1.1rem;
|
|
color: white;
|
|
background: hsl(170deg 100% 50%);
|
|
will-change: transform;
|
|
transform: translateY(-4px);
|
|
box-shadow: inset 4px 4px 8px hsl(170deg 100% 30%), inset -4px -4px 8px hsl(170deg 100% 80%);
|
|
transition: all
|
|
600ms
|
|
cubic-bezier(.3, .7, .4, 1);
|
|
}
|
|
|
|
.button .front svg {
|
|
display: block;
|
|
color: hsl(170deg 100% 30%);
|
|
margin-right: 0;
|
|
}
|
|
|
|
.button:hover .front {
|
|
transform: translateY(-6px);
|
|
transition: transform
|
|
|
|
250ms
|
|
cubic-bezier(.3, .7, .4, 1.5);
|
|
}
|
|
|
|
.button:active .front {
|
|
transform: translateY(-2px);
|
|
transition: transform 34ms;
|
|
}
|
|
|
|
.button:hover .shadow {
|
|
transform: translateY(4px);
|
|
transition: transform
|
|
250ms
|
|
cubic-bezier(.3, .7, .4, 1.5);
|
|
}
|
|
|
|
.button:active .shadow {
|
|
transform: translateY(1px);
|
|
transition: transform 34ms;
|
|
}
|
|
</style>
|