DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.btn-holo deutlich aufgewertet: größer, kräftiger, mit Medaillen-Ring und pulsierendem Halo-Glow

Browse Source 
Auf Wunsch ("richtig geiles, mega schönes, das Beste vom Besten") spürbar
verstärkt: größere Maße (Padding/Schrift), Versalien-Schrift, dickerer
heller Rand, zusätzlicher dunkler+heller Doppelring per box-shadow (wie
ein Rarity-Rahmen), permanent pulsierender Farbglow (nicht mehr nur bei
Hover), schnellerer/kräftigerer Glare-Sweep, größere und auffälligere
Sparkles, deutlicherer Hover-Pop (Scale + Farbglow-Ausbruch).
This commit is contained in:
DogFatherGit
2026-08-03 02:43:49 +02:00
parent 1ab188dcb7
commit a28cfbf08a
1 changed files with 49 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+49 -27
View File
@@ -828,37 +828,39 @@ header.site-header {
overflow: hidden;
display: inline-flex;
align-items: center;
gap: .6rem;
padding: 1.05rem 2.7rem;
gap: .8rem;
padding: 1.4rem 3.6rem;
border-radius: 999px;
font-weight: 800;
font-size: 1.18rem;
letter-spacing: .02em;
font-weight: 900;
font-size: 1.5rem;
letter-spacing: .03em;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, .55);
border: 2px solid rgba(255, 255, 255, .7);
background: linear-gradient(120deg,
#8fd9ea 0%, #8b5cf6 22%, #ff9ecb 42%, #ffd68a 58%, #8fd9ea 78%, #8b5cf6 100%);
background-size: 320% 320%;
animation: btn-holo-shift 7s ease-in-out infinite;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
box-shadow: 0 8px 24px rgba(139, 92, 246, .35),
0 8px 24px rgba(143, 217, 234, .25);
#8fd9ea 0%, #8b5cf6 18%, #ff5fa8 38%, #ffcf4d 54%, #8fd9ea 74%, #8b5cf6 100%);
background-size: 340% 340%;
animation: btn-holo-shift 6s ease-in-out infinite, btn-holo-halo 2.6s ease-in-out infinite;
transition: transform .25s cubic-bezier(.2, .8, .3, 1.4), box-shadow .25s ease, border-color .25s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
0 0 0 4px rgba(11, 13, 16, .9),
0 0 0 6px rgba(255, 255, 255, .3);
}
.btn-holo-text {
position: relative;
z-index: 2;
color: #0b0d10;
text-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 -1px 0 rgba(0, 0, 0, .18);
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(0, 0, 0, .22);
}
.btn-holo-spark {
position: relative;
z-index: 2;
display: inline-block;
font-size: .85em;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
animation: btn-holo-twinkle 2s ease-in-out infinite;
font-size: 1.15em;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
animation: btn-holo-twinkle 1.8s ease-in-out infinite;
}
.btn-holo-spark:last-child { animation-delay: 1s; }
.btn-holo-spark:last-child { animation-delay: .9s; }
/* Diagonaler Glare-Sweep, wie Licht, das über echte Folie wandert */
.btn-holo::before {
content: "";
@@ -866,10 +868,10 @@ header.site-header {
inset: 0;
z-index: 1;
background: linear-gradient(100deg,
transparent 30%, rgba(255, 255, 255, .9) 48%, rgba(255, 255, 255, .15) 53%, transparent 72%);
transparent 28%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .2) 54%, transparent 74%);
background-size: 250% 100%;
mix-blend-mode: overlay;
animation: btn-holo-glare 3.4s ease-in-out infinite;
animation: btn-holo-glare 2.8s ease-in-out infinite;
pointer-events: none;
}
/* Feines Foliekorn (SVG-Turbulence), sorgt für den "echten Folien"-Look
@@ -886,22 +888,42 @@ header.site-header {
pointer-events: none;
}
.btn-holo:hover {
transform: translateY(-2px) scale(1.03);
border-color: rgba(255, 255, 255, .8);
box-shadow: 0 14px 34px rgba(139, 92, 246, .5),
0 14px 34px rgba(143, 217, 234, .4);
transform: translateY(-3px) scale(1.06);
border-color: #fff;
animation-play-state: paused;
box-shadow: 0 18px 44px rgba(0, 0, 0, .5),
0 0 0 4px rgba(11, 13, 16, .9),
0 0 0 6px rgba(255, 255, 255, .5),
0 0 40px rgba(139, 92, 246, .6),
0 0 40px rgba(143, 217, 234, .5);
}
@keyframes btn-holo-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes btn-holo-halo {
0%, 100% {
box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
0 0 0 4px rgba(11, 13, 16, .9),
0 0 0 6px rgba(255, 255, 255, .3),
0 0 18px rgba(139, 92, 246, .35),
0 0 18px rgba(143, 217, 234, .3);
}
50% {
box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
0 0 0 4px rgba(11, 13, 16, .9),
0 0 0 6px rgba(255, 255, 255, .45),
0 0 34px rgba(139, 92, 246, .6),
0 0 34px rgba(255, 95, 168, .45);
}
}
@keyframes btn-holo-glare {
0% { background-position: -60% 0; }
100% { background-position: 160% 0; }
0% { background-position: -70% 0; }
100% { background-position: 170% 0; }
}
@keyframes btn-holo-twinkle {
0%, 100% { opacity: .55; transform: scale(.85) rotate(0deg); }
50% { opacity: 1; transform: scale(1.2) rotate(-12deg); }
0%, 100% { opacity: .6; transform: scale(.85) rotate(0deg); }
50% { opacity: 1; transform: scale(1.35) rotate(-14deg); }
}
@media (prefers-reduced-motion: reduce) {
.btn-holo, .btn-holo::before, .btn-holo-spark { animation: none; }