Add shimmer effect to support button
This commit is contained in:
63
styles.css
63
styles.css
@@ -559,3 +559,66 @@ li a span {
|
||||
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Support Button - Shimmer Effect Style */
|
||||
.support-link {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--accent-color) 0%,
|
||||
#ff8c42 100%
|
||||
) !important;
|
||||
border: 2px solid rgba(255, 255, 255, 0.4) !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.support-link::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.4),
|
||||
transparent
|
||||
);
|
||||
animation: shimmer 2.5s infinite;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.support-link::after {
|
||||
display: none !important; /* Remove the standard shine effect */
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
100% {
|
||||
left: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
.support-link:hover {
|
||||
transform: translateY(-3px) scale(1.01) !important;
|
||||
box-shadow: 0 10px 40px rgba(244, 162, 97, 0.6) !important;
|
||||
border-color: rgba(255, 255, 255, 0.6) !important;
|
||||
}
|
||||
|
||||
.support-link strong,
|
||||
.support-link span {
|
||||
color: #1a103c !important;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.support-link strong {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.support-link span {
|
||||
opacity: 0.85 !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user