.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:
+15
-15
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user