mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
112 lines
2.1 KiB
HTML
112 lines
2.1 KiB
HTML
<button id="br__btn">
|
|
<i id="br__gradient"></i>
|
|
<i class="star" style="--order: 1;"></i>
|
|
<i class="star" style="--order: 2;"></i>
|
|
<i class="star" style="--order: 3;"></i>
|
|
<i class="star" style="--order: 4;"></i>
|
|
<i class="star" style="--order: 5;"></i>
|
|
<i class="star" style="--order: 6;"></i>
|
|
<i class="star" style="--order: 7;"></i>
|
|
<i class="star" style="--order: 8;"></i>
|
|
<i class="star" style="--order: 9;"></i>
|
|
<span class="txt">Explore</span>
|
|
</button>
|
|
<style>
|
|
/* From Uiverse.io by bhaveshxrawat - Tags: button */
|
|
#br__btn {
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
font-size: 1.188rem;
|
|
padding: .625em 1.25em;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: .75em;
|
|
border: 0;
|
|
color: #fff;
|
|
--degPrimary: 100.98deg;
|
|
}
|
|
|
|
#br__gradient {
|
|
position: absolute;
|
|
background: conic-gradient(from var(--degPrimary) at 50% 50%, #0E6CB9 -14.31deg, rgba(251, 251, 251, 0.5) 4.98deg, #1F1F1F 90.36deg, #FFFFFF 97.67deg, #151250 288.5deg, #401C73 315.27deg, #0E6CB9 345.69deg, rgba(251, 251, 251, 0.5) 364.98deg);
|
|
aspect-ratio: 1 / 1;
|
|
width: 220%;
|
|
bottom: -320%;
|
|
left: -110%;
|
|
border-radius: 50%;
|
|
z-index: 0;
|
|
user-select: none;
|
|
transition: transform 0.5s ease-in;
|
|
}
|
|
|
|
#br__btn:hover i {
|
|
transform: rotate(-105deg);
|
|
}
|
|
|
|
#br__btn:hover span {
|
|
transform: scale(0.62);
|
|
transition: 3s ease-in-out;
|
|
}
|
|
|
|
.star {
|
|
width: 1px;
|
|
height: 1px;
|
|
background-color: white;
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.star:not(:hover) {
|
|
transition-duration: 0s;
|
|
}
|
|
|
|
.star:nth-child(2) {
|
|
right: 25%;
|
|
}
|
|
|
|
.star:nth-child(3) {
|
|
right: 60%;
|
|
}
|
|
|
|
.star:nth-child(4) {
|
|
right: 11%;
|
|
}
|
|
|
|
.star:nth-child(5) {
|
|
right: 22%;
|
|
}
|
|
|
|
.star:nth-child(6) {
|
|
right: 42%;
|
|
}
|
|
|
|
.star:nth-child(7) {
|
|
right: 62%;
|
|
}
|
|
|
|
.star:nth-child(8) {
|
|
right: 12%;
|
|
}
|
|
|
|
.star:nth-child(9) {
|
|
right: 82%;
|
|
}
|
|
|
|
#br__btn:hover .star {
|
|
visibility: visible;
|
|
top: calc(5px * var(--order)/2);
|
|
transition: top 1s ease-in 2s, 2s visibility ease-in 2s;
|
|
}
|
|
|
|
#br__btn:not(:hover) .txt {
|
|
transition-delay: 0.3s;
|
|
transition-duration: 0.5s;
|
|
}
|
|
|
|
.txt {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
</style>
|