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; overflow: hidden;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: .6rem; gap: .8rem;
padding: 1.05rem 2.7rem; padding: 1.4rem 3.6rem;
border-radius: 999px; border-radius: 999px;
font-weight: 800; font-weight: 900;
font-size: 1.18rem; font-size: 1.5rem;
letter-spacing: .02em; letter-spacing: .03em;
text-decoration: none; text-decoration: none;
border: 1px solid rgba(255, 255, 255, .55); border: 2px solid rgba(255, 255, 255, .7);
background: linear-gradient(120deg, background: linear-gradient(120deg,
#8fd9ea 0%, #8b5cf6 22%, #ff9ecb 42%, #ffd68a 58%, #8fd9ea 78%, #8b5cf6 100%); #8fd9ea 0%, #8b5cf6 18%, #ff5fa8 38%, #ffcf4d 54%, #8fd9ea 74%, #8b5cf6 100%);
background-size: 320% 320%; background-size: 340% 340%;
animation: btn-holo-shift 7s ease-in-out infinite; animation: btn-holo-shift 6s ease-in-out infinite, btn-holo-halo 2.6s ease-in-out infinite;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; transition: transform .25s cubic-bezier(.2, .8, .3, 1.4), box-shadow .25s ease, border-color .25s ease;
box-shadow: 0 8px 24px rgba(139, 92, 246, .35), box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
0 8px 24px rgba(143, 217, 234, .25); 0 0 0 4px rgba(11, 13, 16, .9),
0 0 0 6px rgba(255, 255, 255, .3);
} }
.btn-holo-text { .btn-holo-text {
position: relative; position: relative;
z-index: 2; z-index: 2;
color: #0b0d10; 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 { .btn-holo-spark {
position: relative; position: relative;
z-index: 2; z-index: 2;
display: inline-block; display: inline-block;
font-size: .85em; font-size: 1.15em;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
animation: btn-holo-twinkle 2s ease-in-out infinite; 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 */ /* Diagonaler Glare-Sweep, wie Licht, das über echte Folie wandert */
.btn-holo::before { .btn-holo::before {
content: ""; content: "";
@@ -866,10 +868,10 @@ header.site-header {
inset: 0; inset: 0;
z-index: 1; z-index: 1;
background: linear-gradient(100deg, 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%; background-size: 250% 100%;
mix-blend-mode: overlay; 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; pointer-events: none;
} }
/* Feines Foliekorn (SVG-Turbulence), sorgt für den "echten Folien"-Look /* Feines Foliekorn (SVG-Turbulence), sorgt für den "echten Folien"-Look
@@ -886,22 +888,42 @@ header.site-header {
pointer-events: none; pointer-events: none;
} }
.btn-holo:hover { .btn-holo:hover {
transform: translateY(-2px) scale(1.03); transform: translateY(-3px) scale(1.06);
border-color: rgba(255, 255, 255, .8); border-color: #fff;
box-shadow: 0 14px 34px rgba(139, 92, 246, .5), animation-play-state: paused;
0 14px 34px rgba(143, 217, 234, .4); 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 { @keyframes btn-holo-shift {
0%, 100% { background-position: 0% 50%; } 0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 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 { @keyframes btn-holo-glare {
0% { background-position: -60% 0; } 0% { background-position: -70% 0; }
100% { background-position: 160% 0; } 100% { background-position: 170% 0; }
} }
@keyframes btn-holo-twinkle { @keyframes btn-holo-twinkle {
0%, 100% { opacity: .55; transform: scale(.85) rotate(0deg); } 0%, 100% { opacity: .6; transform: scale(.85) rotate(0deg); }
50% { opacity: 1; transform: scale(1.2) rotate(-12deg); } 50% { opacity: 1; transform: scale(1.35) rotate(-14deg); }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.btn-holo, .btn-holo::before, .btn-holo-spark { animation: none; } .btn-holo, .btn-holo::before, .btn-holo-spark { animation: none; }