Neuer "Mega"-Button-Stil auf Vorrat: .btn-holo (Holo-Foil-Effekt)
Zweite Variante auf demselben Qualitätsniveau wie .btn-legendary, aber mechanisch komplett anders (auf Wunsch von Dogi: "verschiedene, aber auf dem Niveau"). Statt dunklem Hintergrund + hellem Rand/Chrome-Text ist hier die GESAMTE Pille eine wandernde Holo-Foil-Fläche im Marken-Farbverlauf (Babyblau → Lila → Pink → Gold), mit diagonalem Glare-Sweep wie echtes Folienlicht, feinem Foliekorn (SVG-Turbulence) und dunkler geprägter Schrift obendrauf. Noch nirgends im Einsatz — fertig zur Verwendung mit .btn-holo/.btn-holo-text/.btn-holo-spark, Beispiel-Markup im CSS-Kommentar.
This commit is contained in:
@@ -804,6 +804,109 @@ header.site-header {
|
||||
}
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
.btn-holo — zweiter "Mega"-Button-Stil, bewusst MECHANISCH anders als
|
||||
.btn-legendary/.btn-silver/.btn-tiktok (die alle nach demselben Muster
|
||||
funktionieren: dunkler Hintergrund + heller Rand/Text-Glanz). Hier ist
|
||||
stattdessen die GESAMTE Pille eine wandernde Holo-Foil-Fläche, wie bei
|
||||
einer schillernden Trading-Card — Marken-Farbverlauf (Babyblau → Lila
|
||||
→ Pink → Gold → zurück), ein diagonaler Glare-Sweep wie echtes reflek-
|
||||
tierendes Folienlicht, feines Foliekorn und dunkle geprägte Schrift
|
||||
OBEN DRAUF statt heller Chrome-Schrift auf Dunkel. Auf Vorrat gebaut
|
||||
(03.08.2026, auf Wunsch von Dogi) — noch nirgends im Einsatz, einfach
|
||||
die Klassen wie unten im Beispiel verwenden:
|
||||
|
||||
<a class="btn-holo" href="...">
|
||||
<span class="btn-holo-spark" aria-hidden="true">💎</span>
|
||||
<span class="btn-holo-text">Label</span>
|
||||
<span class="btn-holo-spark" aria-hidden="true">💎</span>
|
||||
</a>
|
||||
===================================================================== */
|
||||
.btn-holo {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
padding: 1.05rem 2.7rem;
|
||||
border-radius: 999px;
|
||||
font-weight: 800;
|
||||
font-size: 1.18rem;
|
||||
letter-spacing: .02em;
|
||||
text-decoration: none;
|
||||
border: 1px solid rgba(255, 255, 255, .55);
|
||||
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);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.btn-holo-spark:last-child { animation-delay: 1s; }
|
||||
/* Diagonaler Glare-Sweep, wie Licht, das über echte Folie wandert */
|
||||
.btn-holo::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
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%);
|
||||
background-size: 250% 100%;
|
||||
mix-blend-mode: overlay;
|
||||
animation: btn-holo-glare 3.4s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Feines Foliekorn (SVG-Turbulence), sorgt für den "echten Folien"-Look
|
||||
statt einer platten Farbverlaufsfläche. */
|
||||
.btn-holo::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
|
||||
background-size: 150px 150px;
|
||||
mix-blend-mode: overlay;
|
||||
opacity: .3;
|
||||
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);
|
||||
}
|
||||
@keyframes btn-holo-shift {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
@keyframes btn-holo-glare {
|
||||
0% { background-position: -60% 0; }
|
||||
100% { background-position: 160% 0; }
|
||||
}
|
||||
@keyframes btn-holo-twinkle {
|
||||
0%, 100% { opacity: .55; transform: scale(.85) rotate(0deg); }
|
||||
50% { opacity: 1; transform: scale(1.2) rotate(-12deg); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.btn-holo, .btn-holo::before, .btn-holo-spark { animation: none; }
|
||||
}
|
||||
|
||||
/* Kompakter Polarlicht-Button für Karten (z.B. Marinas Team-Modi-Karte →
|
||||
direkter Link zur Manager-Seite): exakt derselbe Mechanismus wie
|
||||
.btn-tiktok, nur kleiner und in den Spicy-Media-Markenfarben
|
||||
|
||||
Reference in New Issue
Block a user