mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
48 lines
1.1 KiB
HTML
48 lines
1.1 KiB
HTML
<button class="box">
|
|
Button
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by vikas7754 - Tags: 3d, button, 3d button */
|
|
.box {
|
|
background: linear-gradient(to right, gold, darkorange);
|
|
color: white;
|
|
--width: 200px;
|
|
--height: calc(var(--width) / 3);
|
|
width: var(--width);
|
|
height: var(--height);
|
|
text-align: center;
|
|
line-height: var(--height);
|
|
font-size: calc(var(--height) / 2.5);
|
|
font-family: sans-serif;
|
|
letter-spacing: 0.2em;
|
|
border: 1px solid darkgoldenrod;
|
|
border-radius: 2em;
|
|
transform: perspective(500px) rotateY(-15deg);
|
|
text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
|
|
box-shadow: 2px 0 0 5px rgba(76, 255, 97, 0.8);
|
|
transition: 0.5s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.box:hover {
|
|
transform: perspective(500px) rotateY(15deg);
|
|
text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);
|
|
box-shadow: -2px 0 0 5px rgba(35, 255, 218, 0.8);
|
|
}
|
|
|
|
.box::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(to right, transparent, white, transparent);
|
|
left: -100%;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.box:hover::before {
|
|
left: 100%;
|
|
}
|
|
</style>
|