mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
44 lines
848 B
HTML
44 lines
848 B
HTML
<button class="morph-button"></button>
|
|
|
|
<style>
|
|
/* From Uiverse.io by aadium - Tags: button, twist, dynamic */
|
|
.morph-button {
|
|
display: relative;
|
|
background-color: #66DA43;
|
|
color: #66DA43;
|
|
width: 85px;
|
|
height: 40px;
|
|
border: 2px solid transparent;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.morph-button:hover {
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
.morph-button:active {
|
|
transform: scale(0.8);
|
|
background-color: #212121;
|
|
border: 2px solid #66DA43;
|
|
}
|
|
|
|
.morph-button:before {
|
|
content: "Twist";
|
|
display: block;
|
|
position: absolute;
|
|
margin-top: -22px;
|
|
margin-left: -2px;
|
|
padding: 12px 25px;
|
|
transform-origin: center;
|
|
transition: transform 0.3s ease-in-out;
|
|
z-index: 1;
|
|
background-color: #212121;
|
|
border: 2px solid #66DA43;
|
|
}
|
|
|
|
.morph-button:hover:before {
|
|
transform: rotate(45deg) scale(1.2);
|
|
}
|
|
|
|
</style>
|