mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
60 lines
1.3 KiB
HTML
60 lines
1.3 KiB
HTML
|
|
<button class="box">
|
|
<span class="button">How Are you today?</span>
|
|
</button>
|
|
|
|
|
|
<style>
|
|
/* From Uiverse.io by itay1313 - Tags: button */
|
|
.box {
|
|
--border-radius: 4vmin;
|
|
--bg: #3A3544;
|
|
--color: #D0BCFF;
|
|
--deg: 30deg;
|
|
-webkit-perspective: 200px;
|
|
perspective: 200px;
|
|
-webkit-transform-origin: top center;
|
|
-ms-transform-origin: top center;
|
|
transform-origin: top center;
|
|
max-width: 350px;
|
|
text-align: center;
|
|
outline: none;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.button {
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
-webkit-transform: rotateY(var(--deg));
|
|
transform: rotateY(var(--deg));
|
|
-webkit-transition: all 800ms ease-in-out;
|
|
transition: all 800ms ease-in-out;
|
|
border-radius: var(--border-radius);
|
|
font-style: normal;
|
|
border: none;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
font-size: 2vmin;
|
|
letter-spacing: 0.03vmin;
|
|
padding: 1.3vmin 2.5vmin;
|
|
background: var(--bg);
|
|
color: var(--color);
|
|
}
|
|
|
|
.button:hover {
|
|
-webkit-transform: rotateY(calc(-1 * var(--deg)));
|
|
transform: rotateY(calc(-1 * var(--deg)));
|
|
}
|
|
|
|
.box:active .button {
|
|
-webkit-transform: rotateY(calc(-1 * var(--deg) / 3));
|
|
transform: rotateY(calc(-1 * var(--deg) / 3));
|
|
}
|
|
|
|
.box:focus .button {
|
|
border: 0.05vmin solid var(--color);
|
|
}
|
|
|
|
</style>
|