mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
30 lines
814 B
HTML
30 lines
814 B
HTML
<button class="swipe-button">Hover Me</button>
|
|
<style>
|
|
/* From Uiverse.io by PriyanshuGupta28 - Tags: button, bootsrap button, button hover effect , 2d button */
|
|
.swipe-button {
|
|
padding: 10px 20px;
|
|
font-size: 18px;
|
|
border: none;
|
|
background: linear-gradient(45deg, #3498db, #e74c3c, #9b59b6, #2ecc71);
|
|
background-size: 200% 200%;
|
|
background-position: 0 0;
|
|
color: white;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-family: sans-serif;
|
|
transition: background-position 0.5s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.swipe-button:hover {
|
|
background-position: 100% 100%;
|
|
transform: scale(1.05);
|
|
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.swipe-button:active {
|
|
transform: translateY(2px);
|
|
color: #fff;
|
|
/* Change text color when active */
|
|
}
|
|
|
|
</style>
|