.btn-holo verkleinert (war zu riesig), Look/Effekte bleiben komplett erhalten

Padding/Schrift/Sparkles/Ring-Dicke proportional reduziert (~35% kleiner),
alle Animationen (Farbverlauf, Glare, Sparkle-Twinkle, pulsierender Halo)
unverändert.
This commit is contained in:
2026-08-03 02:48:43 +02:00
parent a28cfbf08a
commit 20f9b516fe
+15 -15
View File
@@ -828,22 +828,22 @@ header.site-header {
overflow: hidden; overflow: hidden;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: .8rem; gap: .6rem;
padding: 1.4rem 3.6rem; padding: .95rem 2.4rem;
border-radius: 999px; border-radius: 999px;
font-weight: 900; font-weight: 900;
font-size: 1.5rem; font-size: 1.12rem;
letter-spacing: .03em; letter-spacing: .02em;
text-decoration: none; text-decoration: none;
border: 2px solid rgba(255, 255, 255, .7); border: 1.5px solid rgba(255, 255, 255, .7);
background: linear-gradient(120deg, background: linear-gradient(120deg,
#8fd9ea 0%, #8b5cf6 18%, #ff5fa8 38%, #ffcf4d 54%, #8fd9ea 74%, #8b5cf6 100%); #8fd9ea 0%, #8b5cf6 18%, #ff5fa8 38%, #ffcf4d 54%, #8fd9ea 74%, #8b5cf6 100%);
background-size: 340% 340%; background-size: 340% 340%;
animation: btn-holo-shift 6s ease-in-out infinite, btn-holo-halo 2.6s ease-in-out infinite; 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; 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), box-shadow: 0 8px 22px rgba(0, 0, 0, .45),
0 0 0 4px rgba(11, 13, 16, .9), 0 0 0 3px rgba(11, 13, 16, .9),
0 0 0 6px rgba(255, 255, 255, .3); 0 0 0 4.5px rgba(255, 255, 255, .3);
} }
.btn-holo-text { .btn-holo-text {
position: relative; position: relative;
@@ -856,7 +856,7 @@ header.site-header {
position: relative; position: relative;
z-index: 2; z-index: 2;
display: inline-block; display: inline-block;
font-size: 1.15em; font-size: .9em;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
animation: btn-holo-twinkle 1.8s ease-in-out infinite; animation: btn-holo-twinkle 1.8s ease-in-out infinite;
} }
@@ -892,8 +892,8 @@ header.site-header {
border-color: #fff; border-color: #fff;
animation-play-state: paused; animation-play-state: paused;
box-shadow: 0 18px 44px rgba(0, 0, 0, .5), box-shadow: 0 18px 44px rgba(0, 0, 0, .5),
0 0 0 4px rgba(11, 13, 16, .9), 0 0 0 3px rgba(11, 13, 16, .9),
0 0 0 6px rgba(255, 255, 255, .5), 0 0 0 4.5px rgba(255, 255, 255, .5),
0 0 40px rgba(139, 92, 246, .6), 0 0 40px rgba(139, 92, 246, .6),
0 0 40px rgba(143, 217, 234, .5); 0 0 40px rgba(143, 217, 234, .5);
} }
@@ -904,15 +904,15 @@ header.site-header {
@keyframes btn-holo-halo { @keyframes btn-holo-halo {
0%, 100% { 0%, 100% {
box-shadow: 0 10px 30px rgba(0, 0, 0, .45), box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
0 0 0 4px rgba(11, 13, 16, .9), 0 0 0 3px rgba(11, 13, 16, .9),
0 0 0 6px rgba(255, 255, 255, .3), 0 0 0 4.5px rgba(255, 255, 255, .3),
0 0 18px rgba(139, 92, 246, .35), 0 0 18px rgba(139, 92, 246, .35),
0 0 18px rgba(143, 217, 234, .3); 0 0 18px rgba(143, 217, 234, .3);
} }
50% { 50% {
box-shadow: 0 10px 30px rgba(0, 0, 0, .45), box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
0 0 0 4px rgba(11, 13, 16, .9), 0 0 0 3px rgba(11, 13, 16, .9),
0 0 0 6px rgba(255, 255, 255, .45), 0 0 0 4.5px rgba(255, 255, 255, .45),
0 0 34px rgba(139, 92, 246, .6), 0 0 34px rgba(139, 92, 246, .6),
0 0 34px rgba(255, 95, 168, .45); 0 0 34px rgba(255, 95, 168, .45);
} }