galaxy/Buttons/kyle1dev_chilly-goose-0.html

30 lines
No EOL
736 B
HTML

<button class="elegant-button">Click Me</button>
<style>
/* From Uiverse.io by kyle1dev - Tags: button */
.elegant-button {
background: linear-gradient(45deg, #00bfff, #1e90ff);
border: none;
border-radius: 8px;
color: white;
font-size: 16px;
font-weight: bold;
padding: 12px 24px;
cursor: pointer;
outline: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.elegant-button:hover {
background: linear-gradient(45deg, #1e90ff, #00bfff);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
transform: translateY(-4px);
}
.elegant-button:active {
background: linear-gradient(45deg, #00bfff, #1e90ff);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transform: translateY(0);
}
</style>