mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
120 lines
2 KiB
HTML
120 lines
2 KiB
HTML
|
|
<button alt="BECOME A MEMBER">
|
|
<i>B</i>
|
|
<i>E</i>
|
|
<i>C</i>
|
|
<i>O</i>
|
|
<i>M</i>
|
|
<i>E</i>
|
|
<i> </i>
|
|
<i>A</i>
|
|
<i> </i>
|
|
<i>M</i>
|
|
<i>E</i>
|
|
<i>M</i>
|
|
<i>B</i>
|
|
<i>E</i>
|
|
<i>R</i>
|
|
</button>
|
|
|
|
|
|
<style>
|
|
/* From Uiverse.io by A3zra - Tags: button, 3d cool effect, 3d hover */
|
|
button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 50px;
|
|
position: relative;
|
|
padding: 0 20px;
|
|
font-size: 18px;
|
|
text-transform: uppercase;
|
|
border: 0;
|
|
background-color: #E15331;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
transition: 31ms cubic-bezier(.5, .7, .4, 1);
|
|
width: 300px;
|
|
}
|
|
|
|
button:before {
|
|
content: attr(alt);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
inset: 0;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
color: white;
|
|
letter-spacing: 4px;
|
|
opacity: 1;
|
|
}
|
|
|
|
button:active {
|
|
box-shadow: none;
|
|
transform: translateY(7px);
|
|
transition: 35ms cubic-bezier(.5, .7, .4, 1);
|
|
}
|
|
|
|
button:hover:before {
|
|
transition: all .0s;
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
color: #E15331;
|
|
}
|
|
|
|
button i {
|
|
color: white;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
letter-spacing: 4px;
|
|
font-style: normal;
|
|
transition: all 2s ease;
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
}
|
|
|
|
button:hover i {
|
|
transition: all .2s ease;
|
|
transform: translateY(0px);
|
|
opacity: 1;
|
|
}
|
|
|
|
button:hover i:nth-child(1) {
|
|
transition-delay: 0.045s;
|
|
}
|
|
|
|
button:hover i:nth-child(2) {
|
|
transition-delay: calc(0.045s * 3);
|
|
}
|
|
|
|
button:hover i:nth-child(3) {
|
|
transition-delay: calc(0.045s * 4);
|
|
}
|
|
|
|
button:hover i:nth-child(4) {
|
|
transition-delay: calc(0.045s * 5);
|
|
}
|
|
|
|
button:hover i:nth-child(6) {
|
|
transition-delay: calc(0.045s * 6);
|
|
}
|
|
|
|
button:hover i:nth-child(7) {
|
|
transition-delay: calc(0.045s * 7);
|
|
}
|
|
|
|
button:hover i:nth-child(8) {
|
|
transition-delay: calc(0.045s * 8);
|
|
}
|
|
|
|
button:hover i:nth-child(9) {
|
|
transition-delay: calc(0.045s * 9);
|
|
}
|
|
|
|
button:hover i:nth-child(10) {
|
|
transition-delay: calc(0.045s * 10);
|
|
}
|
|
|
|
</style>
|