mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 21:20:21 +08:00
44 lines
985 B
HTML
44 lines
985 B
HTML
<button class="btn btn-1">Hover Me!</button>
|
|
<style>
|
|
/* From Uiverse.io by mobinkakei - Tags: button */
|
|
.btn {
|
|
text-decoration: none;
|
|
padding: 20px 40px;
|
|
font-size: 1em;
|
|
position: relative;
|
|
margin: 32px;
|
|
border: none;
|
|
background-color: #26caf8;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-1 {
|
|
overflow: hidden;
|
|
color: #fff;
|
|
border-radius: 30px;
|
|
box-shadow: 0 0 0 0 rgba(143, 64, 248, 0.5), 0 0 0 0 rgba(39, 200, 255, 0.5);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.btn-1::after {
|
|
content: "";
|
|
width: 400px;
|
|
height: 400px;
|
|
position: absolute;
|
|
top: -50px;
|
|
left: -100px;
|
|
background-color: #ff3cac;
|
|
background-image: linear-gradient(225deg, #27d86c 0%, #26caf8 50%, #c625d0 100%);
|
|
z-index: -1;
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.btn-1:hover {
|
|
transform: translate(0, -6px);
|
|
box-shadow: 10px -10px 25px 0 rgba(143, 64, 248, 0.5), -10px 10px 25px 0 rgba(39, 200, 255, 0.5);
|
|
}
|
|
|
|
.btn-1:hover::after {
|
|
transform: rotate(150deg);
|
|
}
|
|
</style>
|