mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
116 lines
No EOL
2.1 KiB
HTML
116 lines
No EOL
2.1 KiB
HTML
<div class="badge" href="#">
|
|
v2.7
|
|
<span></span>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by elijahgummer - Tags: glassmorphism, animation, badge, card, glass, version, shiny */
|
|
.badge {
|
|
position: relative;
|
|
text-decoration: none;
|
|
padding: 8px 16px;
|
|
color: white;
|
|
font-weight: 500;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
background: rgba(255, 255, 255, 0.25);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
|
|
border-radius: 999px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
user-select: none;
|
|
}
|
|
|
|
.badge span {
|
|
width: 25px;
|
|
height: 25px;
|
|
position: absolute;
|
|
top: -12px;
|
|
right: -2px;
|
|
transform: rotate(-20deg);
|
|
filter: blur(0.5px);
|
|
}
|
|
|
|
.badge span:before,
|
|
.badge span:after {
|
|
content: "";
|
|
position: absolute;
|
|
}
|
|
|
|
.badge span:before {
|
|
width: 1px;
|
|
height: 100%;
|
|
left: 12px;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.7),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.badge span:after {
|
|
width: 100%;
|
|
height: 1px;
|
|
top: 12px;
|
|
background: linear-gradient(
|
|
to left,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.7),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.badge:hover span:after {
|
|
display: block;
|
|
animation: rotate 3s ease-in-out; /* Adjust timing as needed */
|
|
}
|
|
.badge:hover span::before {
|
|
display: block;
|
|
animation: rotate 3s ease-in-out; /* Adjust timing as needed */
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotate(0deg) scale(1);
|
|
}
|
|
50% {
|
|
transform: rotate(180deg) scale(1.8);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg) scale(1);
|
|
}
|
|
}
|
|
|
|
.badge:before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
box-shadow: 0 8px 32px 0 rgba(105, 106, 111, 0.37);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
top: -1px;
|
|
right: -1px;
|
|
bottom: -1px;
|
|
left: -1px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.inspired {
|
|
position: absolute;
|
|
bottom: 8%;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-size: 12px;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.inspired:hover {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
</style>
|
|
|