Custom CTA-Buttons: Sparkle/Demo-Button, blauer Primary-Button mit Text-Animation, einheitlicher Stil für alle blauen Buttons
This commit is contained in:
Basilosaurusrex
456
src/index.css
456
src/index.css
@@ -1,19 +1,17 @@
|
||||
/* Fonts first – @import must be at the very top */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* webklar Design System - Muradov Inspired Minimal Dark Theme */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap");
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Ultra Minimal Deep Black Theme - Muradov Inspired */
|
||||
@@ -241,6 +239,444 @@
|
||||
background: hsl(0 0% 10%);
|
||||
}
|
||||
|
||||
/* Custom CTA button (System-Demo) */
|
||||
.btn-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
--border-radius: 24px;
|
||||
--padding: 4px;
|
||||
--transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--button-color: #101010;
|
||||
--highlight-color-hue: 210deg;
|
||||
|
||||
outline: none;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5em 1.1em;
|
||||
font-family: "Poppins", "Inter", "Segoe UI", sans-serif;
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
background-color: var(--button-color);
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
inset 0px 1px 1px rgba(255, 255, 255, 0.2),
|
||||
inset 0px 2px 2px rgba(255, 255, 255, 0.15),
|
||||
inset 0px 4px 4px rgba(255, 255, 255, 0.1),
|
||||
inset 0px 8px 8px rgba(255, 255, 255, 0.05),
|
||||
inset 0px 16px 16px rgba(255, 255, 255, 0.05),
|
||||
0px -1px 1px rgba(0, 0, 0, 0.02),
|
||||
0px -2px 2px rgba(0, 0, 0, 0.03),
|
||||
0px -4px 4px rgba(0, 0, 0, 0.05),
|
||||
0px -8px 8px rgba(0, 0, 0, 0.06),
|
||||
0px -16px 16px rgba(0, 0, 0, 0.08);
|
||||
border: solid 1px rgba(255, 255, 255, 0.13);
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
transition: box-shadow var(--transition), border var(--transition), background-color var(--transition);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(0px - var(--padding));
|
||||
left: calc(0px - var(--padding));
|
||||
width: calc(100% + var(--padding) * 2);
|
||||
height: calc(100% + var(--padding) * 2);
|
||||
border-radius: calc(var(--border-radius) + var(--padding));
|
||||
pointer-events: none;
|
||||
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.4));
|
||||
z-index: -1;
|
||||
transition: box-shadow var(--transition), filter var(--transition);
|
||||
box-shadow:
|
||||
0 -8px 8px -6px transparent inset,
|
||||
0 -16px 16px -8px transparent inset,
|
||||
1px 1px 1px rgba(255, 255, 255, 0.13),
|
||||
2px 2px 2px rgba(255, 255, 255, 0.07),
|
||||
-1px -1px 1px rgba(0, 0, 0, 0.13),
|
||||
-2px -2px 2px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.btn::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background-image: linear-gradient(
|
||||
0deg,
|
||||
#fff,
|
||||
hsl(var(--highlight-color-hue), 100%, 70%),
|
||||
hsla(var(--highlight-color-hue), 100%, 70%, 0.5),
|
||||
8%,
|
||||
transparent
|
||||
);
|
||||
background-position: 0 0;
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition), filter var(--transition);
|
||||
}
|
||||
|
||||
.btn-letter {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
color: rgba(255, 255, 255, 0.33);
|
||||
animation: letter-anim 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
transition: color var(--transition), text-shadow var(--transition), opacity var(--transition), transform var(--transition);
|
||||
}
|
||||
|
||||
@keyframes letter-anim {
|
||||
50% {
|
||||
text-shadow: 0 0 3px rgba(255, 255, 255, 0.53);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-svg {
|
||||
flex-shrink: 0;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
fill: #e8e8e8;
|
||||
animation: flicker 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
animation-delay: 0.5s;
|
||||
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
|
||||
transition: fill var(--transition), filter var(--transition), opacity var(--transition);
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.txt-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.txt-width-helper {
|
||||
visibility: hidden;
|
||||
white-space: nowrap;
|
||||
font: inherit;
|
||||
word-spacing: -1em;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.txt-width-helper .btn-letter {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.txt-1,
|
||||
.txt-2 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
word-spacing: -1em;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.txt-1 {
|
||||
animation: appear-anim 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
.txt-2 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes appear-anim {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn:focus .txt-1 {
|
||||
animation: opacity-anim 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
.btn:focus .txt-2 {
|
||||
animation: opacity-anim 0.4s cubic-bezier(0.4, 0, 0.2, 1) reverse forwards;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
@keyframes opacity-anim {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn:focus .btn-letter {
|
||||
animation: focused-letter-anim 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards, letter-anim 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
animation-delay: 0s, 1s;
|
||||
}
|
||||
|
||||
@keyframes focused-letter-anim {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
filter: blur(0px);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.08);
|
||||
filter: blur(2px) brightness(150%)
|
||||
drop-shadow(0 0 8px hsl(var(--highlight-color-hue), 100%, 70%));
|
||||
}
|
||||
}
|
||||
|
||||
.btn:focus .btn-svg {
|
||||
animation-duration: 1.2s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.btn:focus::before {
|
||||
box-shadow:
|
||||
0 -8px 12px -6px rgba(255, 255, 255, 0.2) inset,
|
||||
0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.2) inset,
|
||||
1px 1px 1px rgba(255, 255, 255, 0.2),
|
||||
2px 2px 2px rgba(255, 255, 255, 0.07),
|
||||
-1px -1px 1px rgba(0, 0, 0, 0.13),
|
||||
-2px -2px 2px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.btn:focus::after {
|
||||
opacity: 0.6;
|
||||
mask-image: linear-gradient(0deg, #fff, transparent);
|
||||
filter: brightness(100%);
|
||||
}
|
||||
|
||||
.btn-letter:nth-child(1),
|
||||
.btn:focus .btn-letter:nth-child(1) { animation-delay: 0s; }
|
||||
.btn-letter:nth-child(2),
|
||||
.btn:focus .btn-letter:nth-child(2) { animation-delay: 0.08s; }
|
||||
.btn-letter:nth-child(3),
|
||||
.btn:focus .btn-letter:nth-child(3) { animation-delay: 0.16s; }
|
||||
.btn-letter:nth-child(4),
|
||||
.btn:focus .btn-letter:nth-child(4) { animation-delay: 0.24s; }
|
||||
.btn-letter:nth-child(5),
|
||||
.btn:focus .btn-letter:nth-child(5) { animation-delay: 0.32s; }
|
||||
.btn-letter:nth-child(6),
|
||||
.btn:focus .btn-letter:nth-child(6) { animation-delay: 0.4s; }
|
||||
.btn-letter:nth-child(7),
|
||||
.btn:focus .btn-letter:nth-child(7) { animation-delay: 0.48s; }
|
||||
.btn-letter:nth-child(8),
|
||||
.btn:focus .btn-letter:nth-child(8) { animation-delay: 0.56s; }
|
||||
.btn-letter:nth-child(9),
|
||||
.btn:focus .btn-letter:nth-child(9) { animation-delay: 0.64s; }
|
||||
.btn-letter:nth-child(10),
|
||||
.btn:focus .btn-letter:nth-child(10) { animation-delay: 0.72s; }
|
||||
.btn-letter:nth-child(11),
|
||||
.btn:focus .btn-letter:nth-child(11) { animation-delay: 0.8s; }
|
||||
.btn-letter:nth-child(12),
|
||||
.btn:focus .btn-letter:nth-child(12) { animation-delay: 0.88s; }
|
||||
.btn-letter:nth-child(13),
|
||||
.btn:focus .btn-letter:nth-child(13) { animation-delay: 0.96s; }
|
||||
.btn-letter:nth-child(14),
|
||||
.btn:focus .btn-letter:nth-child(14) { animation-delay: 1.04s; }
|
||||
.btn-letter:nth-child(15),
|
||||
.btn:focus .btn-letter:nth-child(15) { animation-delay: 1.12s; }
|
||||
.btn-letter:nth-child(16),
|
||||
.btn:focus .btn-letter:nth-child(16) { animation-delay: 1.2s; }
|
||||
.btn-letter:nth-child(17),
|
||||
.btn:focus .btn-letter:nth-child(17) { animation-delay: 1.28s; }
|
||||
.btn-letter:nth-child(18),
|
||||
.btn:focus .btn-letter:nth-child(18) { animation-delay: 1.36s; }
|
||||
.btn-letter:nth-child(19),
|
||||
.btn:focus .btn-letter:nth-child(19) { animation-delay: 1.44s; }
|
||||
.btn-letter:nth-child(20),
|
||||
.btn:focus .btn-letter:nth-child(20) { animation-delay: 1.52s; }
|
||||
.btn-letter:nth-child(21),
|
||||
.btn:focus .btn-letter:nth-child(21) { animation-delay: 1.6s; }
|
||||
.btn-letter:nth-child(22),
|
||||
.btn:focus .btn-letter:nth-child(22) { animation-delay: 1.68s; }
|
||||
.btn-letter:nth-child(23),
|
||||
.btn:focus .btn-letter:nth-child(23) { animation-delay: 1.76s; }
|
||||
.btn-letter:nth-child(24),
|
||||
.btn:focus .btn-letter:nth-child(24) { animation-delay: 1.84s; }
|
||||
.btn-letter:nth-child(25),
|
||||
.btn:focus .btn-letter:nth-child(25) { animation-delay: 1.92s; }
|
||||
.btn-letter:nth-child(26),
|
||||
.btn:focus .btn-letter:nth-child(26) { animation-delay: 2s; }
|
||||
.btn-letter:nth-child(27),
|
||||
.btn:focus .btn-letter:nth-child(27) { animation-delay: 2.08s; }
|
||||
.btn-letter:nth-child(28),
|
||||
.btn:focus .btn-letter:nth-child(28) { animation-delay: 2.16s; }
|
||||
.btn-letter:nth-child(29),
|
||||
.btn:focus .btn-letter:nth-child(29) { animation-delay: 2.24s; }
|
||||
.btn-letter:nth-child(30),
|
||||
.btn:focus .btn-letter:nth-child(30) { animation-delay: 2.32s; }
|
||||
.btn-letter:nth-child(31),
|
||||
.btn:focus .btn-letter:nth-child(31) { animation-delay: 2.4s; }
|
||||
.btn-letter:nth-child(32),
|
||||
.btn:focus .btn-letter:nth-child(32) { animation-delay: 2.48s; }
|
||||
.btn-letter:nth-child(33),
|
||||
.btn:focus .btn-letter:nth-child(33) { animation-delay: 2.56s; }
|
||||
.btn-letter:nth-child(34),
|
||||
.btn:focus .btn-letter:nth-child(34) { animation-delay: 2.64s; }
|
||||
.btn-letter:nth-child(35),
|
||||
.btn:focus .btn-letter:nth-child(35) { animation-delay: 2.72s; }
|
||||
|
||||
.btn:active {
|
||||
border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.7);
|
||||
background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5);
|
||||
}
|
||||
|
||||
.btn:active::before {
|
||||
box-shadow:
|
||||
0 -8px 12px -6px rgba(255, 255, 255, 0.67) inset,
|
||||
0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.8) inset,
|
||||
1px 1px 1px rgba(255, 255, 255, 0.27),
|
||||
2px 2px 2px rgba(255, 255, 255, 0.13),
|
||||
-1px -1px 1px rgba(0, 0, 0, 0.13),
|
||||
-2px -2px 2px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.btn:active::after {
|
||||
opacity: 1;
|
||||
mask-image: linear-gradient(0deg, #fff, transparent);
|
||||
filter: brightness(200%);
|
||||
}
|
||||
|
||||
.btn:active .btn-letter {
|
||||
text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 0.9);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 0.4);
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
box-shadow:
|
||||
0 -8px 8px -6px rgba(255, 255, 255, 0.67) inset,
|
||||
0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 0.3) inset,
|
||||
1px 1px 1px rgba(255, 255, 255, 0.13),
|
||||
2px 2px 2px rgba(255, 255, 255, 0.07),
|
||||
-1px -1px 1px rgba(0, 0, 0, 0.13),
|
||||
-2px -2px 2px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.btn:hover::after {
|
||||
opacity: 1;
|
||||
mask-image: linear-gradient(0deg, #fff, transparent);
|
||||
}
|
||||
|
||||
.btn:hover .btn-svg {
|
||||
fill: #fff;
|
||||
filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%))
|
||||
drop-shadow(0 -4px 6px rgba(0, 0, 0, 0.6));
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* Shared primary button look – for all blue/primary buttons */
|
||||
.btn-primary-style {
|
||||
padding: 0.5em 1.1em;
|
||||
border-radius: 24px;
|
||||
box-shadow:
|
||||
inset 0px 1px 1px rgba(255, 255, 255, 0.25),
|
||||
inset 0px 2px 2px rgba(255, 255, 255, 0.2),
|
||||
0px 2px 4px rgba(0, 0, 0, 0.2),
|
||||
0px 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
border 0.35s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.btn-primary-style:hover {
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
box-shadow:
|
||||
inset 0px 1px 1px rgba(255, 255, 255, 0.3),
|
||||
inset 0px 2px 2px rgba(255, 255, 255, 0.25),
|
||||
0px 2px 4px rgba(0, 0, 0, 0.2),
|
||||
0px 4px 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Primary (blue) variant – same structure, blue color */
|
||||
.btn-primary {
|
||||
--button-color: hsl(198, 93%, 42%);
|
||||
--highlight-color-hue: 198deg;
|
||||
box-shadow:
|
||||
inset 0px 1px 1px rgba(255, 255, 255, 0.25),
|
||||
inset 0px 2px 2px rgba(255, 255, 255, 0.2),
|
||||
0px 2px 4px rgba(0, 0, 0, 0.2),
|
||||
0px 4px 8px rgba(0, 0, 0, 0.15);
|
||||
border: solid 1px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.btn-primary::before {
|
||||
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
.btn-primary .btn-letter {
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
@keyframes letter-anim-primary {
|
||||
0%, 100% {
|
||||
text-shadow: none;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 12px rgba(255, 255, 255, 0.4);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary .btn-letter {
|
||||
animation: letter-anim-primary 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
|
||||
}
|
||||
|
||||
/* Arrow icon (stroke-based) – same size and animation as .btn-svg */
|
||||
.btn-icon {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: #e8e8e8;
|
||||
animation: flicker 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
animation-delay: 0.5s;
|
||||
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
|
||||
transition: color var(--transition), filter var(--transition), opacity var(--transition);
|
||||
}
|
||||
|
||||
.btn:hover .btn-icon {
|
||||
color: #fff;
|
||||
filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%))
|
||||
drop-shadow(0 -4px 6px rgba(0, 0, 0, 0.6));
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.btn:focus .btn-icon {
|
||||
animation-duration: 1.2s;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
/* Stats number */
|
||||
.stat-number {
|
||||
font-family: 'Space Grotesk', system-ui, sans-serif;
|
||||
|
||||
Reference in New Issue
Block a user