mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
57 lines
1 KiB
HTML
57 lines
1 KiB
HTML
<button class="button">
|
|
Enter
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by r7chardgh - Tags: 3d, button, keyboard style */
|
|
.button {
|
|
position: relative;
|
|
padding: 1em 1.5em;
|
|
transform: rotateX(40deg)rotateZ(40deg);
|
|
transform-style: preserve-3d;
|
|
border: .1em solid black;
|
|
transition: all 150ms;
|
|
background-color: rgb(233, 211, 184);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 2em;
|
|
height: 99%;
|
|
border: .1em solid black;
|
|
top: -.15em;
|
|
right: 0;
|
|
transform-origin: right;
|
|
transform: rotateY(-90deg);
|
|
transition: all 150ms;
|
|
background-color: rgb(155, 139, 120);
|
|
}
|
|
|
|
.button::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 2em;
|
|
border: .1em solid black;
|
|
bottom: 0;
|
|
left: -.15em;
|
|
transform-origin: bottom;
|
|
transform: rotateX(90deg);
|
|
transition: all 150ms;
|
|
background-color: rgb(199, 179, 155);
|
|
}
|
|
|
|
.button:active {
|
|
transform: rotateX(40deg)rotateZ(40deg) translateZ(-1em);
|
|
}
|
|
|
|
.button:active::before {
|
|
width: 0;
|
|
}
|
|
|
|
.button:active::after {
|
|
height: 0;
|
|
}
|
|
|
|
</style>
|