From a28cfbf08a3690bec27719d32fab4621b13af4ce Mon Sep 17 00:00:00 2001 From: Dogfather Date: Mon, 3 Aug 2026 02:43:49 +0200 Subject: [PATCH] =?UTF-8?q?.btn-holo=20deutlich=20aufgewertet:=20gr=C3=B6?= =?UTF-8?q?=C3=9Fer,=20kr=C3=A4ftiger,=20mit=20Medaillen-Ring=20und=20puls?= =?UTF-8?q?ierendem=20Halo-Glow?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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). --- assets/css/main.css | 76 +++++++++++++++++++++++++++++---------------- 1 file changed, 49 insertions(+), 27 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 3a909b9..dd3e9e9 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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; }