mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
44 lines
862 B
HTML
44 lines
862 B
HTML
<button class="button">
|
|
Button
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by Rodrypaladin - Tags: simple, animation, blue, button, css, css effect */
|
|
.button {
|
|
padding: 10px 20px;
|
|
font-size: 1.1rem;
|
|
background-color: rgb(74, 153, 255);
|
|
border: none;
|
|
color: white;
|
|
position: relative;
|
|
width: 120px;
|
|
height: 45px;
|
|
transition: background-color 0.2s ease-in, all 0.15s ease-in;
|
|
}
|
|
|
|
button::after {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
content: "Button";
|
|
width: 120px;
|
|
height: 45px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transform: translate(5px, 5px);
|
|
background-color: rgb(1, 111, 255);
|
|
transition: all 0.15s ease-in;
|
|
}
|
|
|
|
button:hover::after {
|
|
transform: translate(-5px, -6px);
|
|
}
|
|
|
|
button:hover {
|
|
transform: translate(5px, 5px);
|
|
}
|
|
|
|
button:active::after {
|
|
background-color: rgb(0, 83, 192);
|
|
}
|
|
</style>
|