mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
51 lines
864 B
HTML
51 lines
864 B
HTML
<button class="button">
|
|
<span>Explore </span>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by praveen-prasad2 - Tags: button */
|
|
.button {
|
|
position: relative;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
color: #fff;
|
|
padding: 3px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.button::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 200%;
|
|
height: 100%;
|
|
background: linear-gradient(115deg,
|
|
#4fcf70, #fad648,
|
|
#a767e5,#12bcfe,
|
|
#44ce7b);
|
|
background-size: 50% 100%;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.button:hover::before {
|
|
animation: animate_border .75s
|
|
linear infinite;
|
|
}
|
|
|
|
.button span {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: block;
|
|
background-color: #000;
|
|
padding: 13px 20px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
@keyframes animate_border {
|
|
to {
|
|
transform: translateX(-50%)
|
|
}
|
|
}
|
|
|
|
</style>
|