/* ═══════════════════════════════════════════════════════════════════ DYSANIA — BUTTON ANIMATION PRESET SYSTEM ─────────────────────────────────────────────────────────────────── Cara ganti preset: ubah class di layout.blade.php Tersedia 7 preset: btn-preset-classic → shimmer sweep + ring pulse btn-preset-liquid → liquid fill dari bawah btn-preset-electric → glitch flash + glow bar btn-preset-neon → neon border pulse + color burst btn-preset-forge → radial heat dari tengah btn-preset-ghost → border trace keliling + ghost fill btn-preset-plasma → gradient cair berputar ─────────────────────────────────────────────────────────────────── Panduan lengkap: BUTTON_PRESETS.md ═══════════════════════════════════════════════════════════════════ */ /* ╔═══════════════════════════════════════════════════╗ ║ TOKEN KONFIGURASI GLOBAL ║ ║ Edit blok ini untuk kontrol semua preset ║ ╚═══════════════════════════════════════════════════╝ */ :root { /* ── Warna brand ── */ --btn-orange: #FEB237; --btn-orange-dark: #e88e00; --btn-text-dark: #0d0d0d; --btn-text-light: #fff; /* ── Glow & shadow ── */ --btn-glow-color: rgba(254, 178, 55, 0.4); --btn-glow-spread: 28px; /* ── Timing animasi ── */ --btn-hover-speed: 0.38s; --btn-shimmer-speed: 0.55s; --btn-pulse-speed: 2.2s; /* ── Geometri ── */ --btn-radius: 6px; --btn-padding-y: 15px; --btn-padding-x: 38px; --btn-font-size: .95rem; --btn-letter-spacing: 0.04em; /* ── Liquid ── */ --btn-liquid-ease: cubic-bezier(0.4, 0, 0.2, 1); /* ── Electric ── */ --btn-electric-flash: rgba(255, 255, 255, 0.25); --btn-electric-speed: 0.08s; /* ── Neon ── */ --btn-neon-glow-size: 14px; /* seberapa besar glow neon */ --btn-neon-color: #FEB237; /* ── Forge ── */ --btn-forge-core: #fff8e7; /* warna inti panas */ --btn-forge-speed: 0.5s; /* ── Ghost ── */ --btn-ghost-trace-speed: 0.6s; /* kecepatan border trace */ /* ── Plasma ── */ --btn-plasma-speed: 4s; /* kecepatan rotasi gradient idle */ --btn-plasma-hover-speed: 0.8s; /* kecepatan di hover */ } /* ─── BASE SHARED ─── */ .btn-cta-primary, .btn-cta-secondary { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: var(--btn-padding-y) var(--btn-padding-x); font-weight: 700; font-size: var(--btn-font-size); letter-spacing: var(--btn-letter-spacing); text-decoration: none; border: none; outline: none; cursor: pointer; overflow: hidden; vertical-align: middle; border-radius: var(--btn-radius); -webkit-font-smoothing: antialiased; isolation: isolate; } /* Active press — shared semua preset */ .btn-cta-primary:active { transform: scale(0.97) !important; } .btn-cta-secondary:active { transform: scale(0.97) !important; } /* ════════════════════════════════════════════════════════════════ PRESET 1 — CLASSIC Shimmer sweep kiri → kanan, ring pulse idle Aktifkan: ════════════════════════════════════════════════════════════════ */ body.btn-preset-classic .btn-cta-primary { background: var(--btn-orange); color: var(--btn-text-dark); box-shadow: 0 0 0 0 transparent; transition: box-shadow var(--btn-hover-speed) ease, transform .25s cubic-bezier(0.23, 1, 0.32, 1); } body.btn-preset-classic .btn-cta-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); background-size: 250% 100%; background-position: -100% 0; transition: background-position var(--btn-shimmer-speed) cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; } body.btn-preset-classic .btn-cta-primary::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.12); transform: translateX(-101%); transition: transform var(--btn-hover-speed) cubic-bezier(0.23, 1, 0.32, 1); z-index: 1; } body.btn-preset-classic .btn-cta-primary:hover { color: var(--btn-text-dark); box-shadow: 0 0 0 3px rgba(254,178,55,0.3), 0 8px var(--btn-glow-spread) var(--btn-glow-color); transform: scale(1.03); } body.btn-preset-classic .btn-cta-primary:hover::before { background-position: 200% 0; } body.btn-preset-classic .btn-cta-primary:hover::after { transform: translateX(0); } @keyframes btnRingPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(254,178,55,0.5); } 50% { box-shadow: 0 0 0 10px rgba(254,178,55,0); } } body.btn-preset-classic .btn-pulse { animation: btnRingPulse var(--btn-pulse-speed) ease-out infinite; } body.btn-preset-classic .btn-cta-secondary { background: transparent; color: var(--dark-text); box-shadow: inset 0 0 0 1.5px rgba(254,178,55,0.5); transition: color 0.2s ease, box-shadow 0.3s ease; } body.btn-preset-classic .btn-cta-secondary::before { content: ''; position: absolute; inset: 0; background: rgba(254,178,55,0.06); transform: scaleX(0); transform-origin: left center; transition: transform var(--btn-hover-speed) cubic-bezier(0.23, 1, 0.32, 1); z-index: -1; } body.btn-preset-classic .btn-cta-secondary:hover { color: var(--btn-orange); box-shadow: inset 0 0 0 1.5px var(--btn-orange), 0 4px 20px rgba(254,178,55,0.15); } body.btn-preset-classic .btn-cta-secondary:hover::before { transform: scaleX(1); } body.btn-preset-classic .btn-cta-secondary i, body.btn-preset-classic .btn-cta-secondary svg { transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1); } body.btn-preset-classic .btn-cta-secondary:hover i, body.btn-preset-classic .btn-cta-secondary:hover svg { transform: translateX(5px); } [data-theme="light"] body.btn-preset-classic .btn-cta-primary { background: var(--btn-orange-dark); color: #fff; } [data-theme="light"] body.btn-preset-classic .btn-cta-primary:hover { background: #c96d00 !important; color: #fff !important; } [data-theme="light"] body.btn-preset-classic .btn-cta-secondary { color: #1e293b; } [data-theme="light"] body.btn-preset-classic .btn-cta-secondary:hover { color: #c96d00; } /* ════════════════════════════════════════════════════════════════ PRESET 2 — LIQUID Cairan terang naik dari bawah via clip-path Aktifkan: ════════════════════════════════════════════════════════════════ */ body.btn-preset-liquid .btn-cta-primary { background: var(--btn-orange); color: var(--btn-text-dark); transition: color var(--btn-hover-speed) ease, box-shadow var(--btn-hover-speed) ease, transform .25s cubic-bezier(0.23, 1, 0.32, 1); } body.btn-preset-liquid .btn-cta-primary::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(160deg, #fff8e7 0%, #ffd57a 50%, #feb237 100%); clip-path: inset(100% 0 0 0); transition: clip-path var(--btn-hover-speed) var(--btn-liquid-ease); border-radius: inherit; z-index: 1; } body.btn-preset-liquid .btn-cta-primary::after { content: ''; position: absolute; inset: -3px; border-radius: calc(var(--btn-radius) + 3px); background: transparent; z-index: 0; } body.btn-preset-liquid .btn-cta-primary:hover { color: var(--btn-text-dark); transform: translateY(-3px); box-shadow: 0 12px 32px var(--btn-glow-color); } body.btn-preset-liquid .btn-cta-primary:hover::before { clip-path: inset(0% 0 0 0); } body.btn-preset-liquid .btn-cta-primary > * { position: relative; z-index: 2; } body.btn-preset-liquid .btn-cta-primary i, body.btn-preset-liquid .btn-cta-primary svg { transition: transform var(--btn-hover-speed) var(--btn-liquid-ease); } body.btn-preset-liquid .btn-cta-primary:hover i, body.btn-preset-liquid .btn-cta-primary:hover svg { transform: translateY(-2px) rotate(-5deg); } @keyframes liquidPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(254,178,55,0.5); } 50% { box-shadow: 0 0 0 8px rgba(254,178,55,0); } } body.btn-preset-liquid .btn-pulse { animation: liquidPulse var(--btn-pulse-speed) ease-out infinite; } body.btn-preset-liquid .btn-cta-secondary { background: transparent; color: var(--dark-text); box-shadow: none; transition: color 0.25s ease, transform .25s ease; } body.btn-preset-liquid .btn-cta-secondary::before, body.btn-preset-liquid .btn-cta-secondary::after { content: ''; position: absolute; left: 50%; height: 1.5px; background: var(--btn-orange); width: 0; transition: width var(--btn-hover-speed) var(--btn-liquid-ease), left var(--btn-hover-speed) var(--btn-liquid-ease); } body.btn-preset-liquid .btn-cta-secondary::before { top: 0; } body.btn-preset-liquid .btn-cta-secondary::after { bottom: 0; } body.btn-preset-liquid .btn-cta-secondary:hover { color: var(--btn-orange); transform: translateY(-2px); } body.btn-preset-liquid .btn-cta-secondary:hover::before, body.btn-preset-liquid .btn-cta-secondary:hover::after { width: 100%; left: 0; } body.btn-preset-liquid .btn-cta-secondary i, body.btn-preset-liquid .btn-cta-secondary svg { transition: transform 0.3s var(--btn-liquid-ease); } body.btn-preset-liquid .btn-cta-secondary:hover i, body.btn-preset-liquid .btn-cta-secondary:hover svg { transform: translateX(5px); } [data-theme="light"] body.btn-preset-liquid .btn-cta-primary { background: var(--btn-orange-dark); color: #fff; } [data-theme="light"] body.btn-preset-liquid .btn-cta-primary:hover { background: #c96d00 !important; color: #fff !important; } [data-theme="light"] body.btn-preset-liquid .btn-cta-secondary { color: #1e293b; } [data-theme="light"] body.btn-preset-liquid .btn-cta-secondary:hover { color: #c96d00; } [data-theme="light"] body.btn-preset-liquid .btn-cta-secondary::before, [data-theme="light"] body.btn-preset-liquid .btn-cta-secondary::after { background: var(--btn-orange-dark); } /* ════════════════════════════════════════════════════════════════ PRESET 3 — ELECTRIC Flash glitch + glow bar sliding di bawah, icon rotate Aktifkan: ════════════════════════════════════════════════════════════════ */ @keyframes electricFlash { 0% { opacity: 1; } 15% { opacity: 0.3; } 30% { opacity: 1; } 45% { opacity: 0.5; } 60%,100% { opacity: 1; } } @keyframes electricPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(254,178,55,0.6); } 40% { box-shadow: 0 0 0 8px rgba(254,178,55,0.2); } 60% { box-shadow: 0 0 0 14px rgba(254,178,55,0); } } body.btn-preset-electric .btn-cta-primary { background: var(--btn-orange); color: var(--btn-text-dark); transition: transform .25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow .3s ease; } body.btn-preset-electric .btn-cta-primary::before { content: ''; position: absolute; inset: 0; background: var(--btn-electric-flash); opacity: 0; z-index: 1; border-radius: inherit; pointer-events: none; } body.btn-preset-electric .btn-cta-primary::after { content: ''; position: absolute; bottom: 0; left: -100%; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, #fff, var(--btn-orange)); transition: left 0.5s ease; z-index: 2; } body.btn-preset-electric .btn-cta-primary:hover { color: var(--btn-text-dark); transform: scale(1.03) translateY(-2px); box-shadow: 0 0 20px rgba(254,178,55,0.5), 0 8px 32px rgba(254,178,55,0.3), inset 0 0 0 1px rgba(255,255,255,0.15); } body.btn-preset-electric .btn-cta-primary:hover::before { animation: electricFlash 0.5s ease forwards; } body.btn-preset-electric .btn-cta-primary:hover::after { left: 100%; } body.btn-preset-electric .btn-cta-primary i, body.btn-preset-electric .btn-cta-primary svg { position: relative; z-index: 3; transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } body.btn-preset-electric .btn-cta-primary:hover i, body.btn-preset-electric .btn-cta-primary:hover svg { transform: rotate(20deg) scale(1.2); } body.btn-preset-electric .btn-pulse { animation: electricPulse var(--btn-pulse-speed) ease-out infinite; } body.btn-preset-electric .btn-cta-secondary { background: transparent; color: var(--dark-text); box-shadow: inset 0 0 0 1px rgba(254,178,55,0.25); transition: color 0.2s ease, box-shadow 0.3s ease, transform .2s ease; } body.btn-preset-electric .btn-cta-secondary::before { content: ''; position: absolute; inset: 0; background: rgba(254,178,55,0.05); transform: scaleX(0); transform-origin: right center; transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); z-index: -1; } body.btn-preset-electric .btn-cta-secondary:hover { color: var(--btn-orange); transform: translateX(3px); box-shadow: inset 0 0 0 1px var(--btn-orange), 0 0 15px rgba(254,178,55,0.2); } body.btn-preset-electric .btn-cta-secondary:hover::before { transform: scaleX(1); transform-origin: left center; } body.btn-preset-electric .btn-cta-secondary i, body.btn-preset-electric .btn-cta-secondary svg { transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); } body.btn-preset-electric .btn-cta-secondary:hover i, body.btn-preset-electric .btn-cta-secondary:hover svg { transform: translateX(6px); } [data-theme="light"] body.btn-preset-electric .btn-cta-primary { background: var(--btn-orange-dark); color: #fff; } [data-theme="light"] body.btn-preset-electric .btn-cta-primary:hover { background: #c96d00 !important; color: #fff !important; } [data-theme="light"] body.btn-preset-electric .btn-cta-secondary { color: #1e293b; } [data-theme="light"] body.btn-preset-electric .btn-cta-secondary:hover { color: #c96d00; } /* ════════════════════════════════════════════════════════════════ PRESET 4 — NEON Neon border yang memancar + color flare saat hover Konsep: cyberpunk / sci-fi, button menyala dengan aura Aktifkan: ════════════════════════════════════════════════════════════════ */ @keyframes neonPulseIdle { 0%,100% { box-shadow: 0 0 4px var(--btn-neon-color), 0 0 10px rgba(254,178,55,0.3), inset 0 0 4px rgba(254,178,55,0.1); } 50% { box-shadow: 0 0 8px var(--btn-neon-color), 0 0 22px rgba(254,178,55,0.5), inset 0 0 8px rgba(254,178,55,0.2); } } body.btn-preset-neon .btn-cta-primary { background: rgba(254,178,55,0.08); color: var(--btn-neon-color); border: 1px solid rgba(254,178,55,0.5); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; transition: background var(--btn-hover-speed) ease, color var(--btn-hover-speed) ease, box-shadow var(--btn-hover-speed) ease, transform .25s ease; } /* Neon sweep overlay */ body.btn-preset-neon .btn-cta-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(254,178,55,0.15) 50%, transparent 100%); transform: translateX(-100%); transition: transform 0.5s ease; z-index: 1; } /* Outer glow border */ body.btn-preset-neon .btn-cta-primary::after { content: ''; position: absolute; inset: -2px; border-radius: calc(var(--btn-radius) + 2px); border: 1px solid transparent; background: linear-gradient(var(--dark-bg, #080b12), var(--dark-bg, #080b12)) padding-box, linear-gradient(90deg, #FEB237, #f55353, #FEB237) border-box; opacity: 0; transition: opacity 0.3s ease; z-index: -1; } body.btn-preset-neon .btn-cta-primary:hover { background: rgba(254,178,55,0.18); color: #fff; border-color: var(--btn-neon-color); transform: translateY(-2px); box-shadow: 0 0 12px rgba(254,178,55,0.6), 0 0 30px rgba(254,178,55,0.3), 0 0 60px rgba(254,178,55,0.1), inset 0 0 12px rgba(254,178,55,0.1); } body.btn-preset-neon .btn-cta-primary:hover::before { transform: translateX(100%); } body.btn-preset-neon .btn-cta-primary:hover::after { opacity: 1; } body.btn-preset-neon .btn-cta-primary > * { position: relative; z-index: 2; } body.btn-preset-neon .btn-cta-primary i, body.btn-preset-neon .btn-cta-primary svg { transition: transform 0.3s ease, filter 0.3s ease; } body.btn-preset-neon .btn-cta-primary:hover i, body.btn-preset-neon .btn-cta-primary:hover svg { transform: scale(1.15); filter: drop-shadow(0 0 4px rgba(254,178,55,0.9)); } body.btn-preset-neon .btn-pulse { animation: neonPulseIdle var(--btn-pulse-speed) ease-in-out infinite; } /* Neon secondary */ body.btn-preset-neon .btn-cta-secondary { background: transparent; color: var(--dark-text); border: 1px solid rgba(254,178,55,0.2); transition: color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease; } body.btn-preset-neon .btn-cta-secondary::before { display: none; } body.btn-preset-neon .btn-cta-secondary::after { display: none; } body.btn-preset-neon .btn-cta-secondary:hover { color: var(--btn-neon-color); border-color: rgba(254,178,55,0.7); box-shadow: 0 0 8px rgba(254,178,55,0.3), inset 0 0 6px rgba(254,178,55,0.05); } body.btn-preset-neon .btn-cta-secondary i, body.btn-preset-neon .btn-cta-secondary svg { transition: transform 0.3s ease, filter 0.3s ease; } body.btn-preset-neon .btn-cta-secondary:hover i, body.btn-preset-neon .btn-cta-secondary:hover svg { transform: translateX(4px); filter: drop-shadow(0 0 3px rgba(254,178,55,0.8)); } [data-theme="light"] body.btn-preset-neon .btn-cta-primary { background: rgba(254,178,55,0.1); color: #c96d00; border-color: rgba(232,142,0,0.4); } [data-theme="light"] body.btn-preset-neon .btn-cta-primary:hover { background: #e88e00 !important; color: #fff !important; border-color: #e88e00; } [data-theme="light"] body.btn-preset-neon .btn-cta-primary::after { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #e88e00, #f55353, #e88e00) border-box; } [data-theme="light"] body.btn-preset-neon .btn-cta-secondary { color: #1e293b; border-color: rgba(232,142,0,0.3); } [data-theme="light"] body.btn-preset-neon .btn-cta-secondary:hover { color: #c96d00; border-color: rgba(232,142,0,0.6); } /* ════════════════════════════════════════════════════════════════ PRESET 5 — FORGE Panas dari inti menyebar keluar (radial reveal), seperti logam dibakar dari dalam. Warna dingin → panas → melunak Aktifkan: ════════════════════════════════════════════════════════════════ */ @keyframes forgeGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(254,178,55,0), 0 4px 15px rgba(0,0,0,0.3); } 50% { box-shadow: 0 0 18px rgba(254,83,83,0.4), 0 4px 15px rgba(0,0,0,0.3); } } body.btn-preset-forge .btn-cta-primary { background: #1a1a2e; /* dingin seperti besi sebelum dipanaskan */ color: var(--btn-orange); border: 1px solid rgba(254,178,55,0.3); transition: transform .25s ease, box-shadow .3s ease, color .3s ease; } /* Radial heat core */ body.btn-preset-forge .btn-cta-primary::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, var(--btn-forge-core) 0%, var(--btn-orange) 35%, #f55353 65%, transparent 100%); border-radius: 50%; transform: translate(-50%, -50%); transition: width var(--btn-forge-speed) cubic-bezier(0.23, 1, 0.32, 1), height var(--btn-forge-speed) cubic-bezier(0.23, 1, 0.32, 1), opacity var(--btn-forge-speed) ease; opacity: 0; z-index: 1; } body.btn-preset-forge .btn-cta-primary::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.3); opacity: 0; z-index: 2; transition: opacity .2s ease; } body.btn-preset-forge .btn-cta-primary:hover { color: #0d0d0d; transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 30px rgba(254,83,83,0.4), 0 0 0 2px rgba(254,178,55,0.3); border-color: #f55353; } body.btn-preset-forge .btn-cta-primary:hover::before { width: 250%; height: 400%; /* meluber keluar dari button */ opacity: 1; } body.btn-preset-forge .btn-cta-primary > * { position: relative; z-index: 3; } body.btn-preset-forge .btn-cta-primary i, body.btn-preset-forge .btn-cta-primary svg { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease; } body.btn-preset-forge .btn-cta-primary:hover i, body.btn-preset-forge .btn-cta-primary:hover svg { transform: rotate(-15deg) scale(1.3); filter: drop-shadow(0 0 4px rgba(255,255,255,0.8)); } body.btn-preset-forge .btn-pulse { animation: forgeGlow var(--btn-pulse-speed) ease-in-out infinite; } /* Forge secondary */ body.btn-preset-forge .btn-cta-secondary { background: transparent; color: var(--dark-text); border: 1px solid rgba(254,178,55,0.25); transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform .2s ease; } body.btn-preset-forge .btn-cta-secondary::before { display: none; } body.btn-preset-forge .btn-cta-secondary::after { display: none; } body.btn-preset-forge .btn-cta-secondary:hover { color: #0d0d0d; background: var(--btn-orange); border-color: #f55353; transform: translateY(-2px); } body.btn-preset-forge .btn-cta-secondary i, body.btn-preset-forge .btn-cta-secondary svg { transition: transform 0.3s ease; } body.btn-preset-forge .btn-cta-secondary:hover i, body.btn-preset-forge .btn-cta-secondary:hover svg { transform: translateX(5px); } [data-theme="light"] body.btn-preset-forge .btn-cta-primary { background: #e8eaf6; color: #c96d00; border-color: rgba(254,178,55,0.4); } [data-theme="light"] body.btn-preset-forge .btn-cta-primary:hover { background: #e88e00 !important; color: #fff !important; border-color: #f55353; } [data-theme="light"] body.btn-preset-forge .btn-cta-secondary { color: #1e293b; border-color: rgba(254,178,55,0.2); } [data-theme="light"] body.btn-preset-forge .btn-cta-secondary:hover { background: #e88e00; color: #fff; border-color: #f55353; } /* ════════════════════════════════════════════════════════════════ PRESET 6 — GHOST Border trace mengelilingi tepi button, background ghost fill Konsep: clean, minimal, premium — seperti blueprint tech Aktifkan: ════════════════════════════════════════════════════════════════ */ @keyframes ghostPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(254,178,55,0); } 50% { box-shadow: 0 0 0 6px rgba(254,178,55,0.15); } } body.btn-preset-ghost .btn-cta-primary { background: transparent; color: var(--btn-orange); /* Blueprint grid lines feel */ box-shadow: inset 0 0 0 1px rgba(254,178,55,0.35); transition: color var(--btn-ghost-trace-speed) ease, transform .25s ease; } /* Top + Left border trace */ body.btn-preset-ghost .btn-cta-primary::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 2px solid var(--btn-orange); border-left: 2px solid var(--btn-orange); border-radius: var(--btn-radius) 0 0 0; transition: width var(--btn-ghost-trace-speed) ease, height var(--btn-ghost-trace-speed) ease; z-index: 1; } /* Bottom + Right border trace */ body.btn-preset-ghost .btn-cta-primary::after { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-bottom: 2px solid var(--btn-orange); border-right: 2px solid var(--btn-orange); border-radius: 0 0 var(--btn-radius) 0; transition: width var(--btn-ghost-trace-speed) ease, height var(--btn-ghost-trace-speed) ease; z-index: 1; } body.btn-preset-ghost .btn-cta-primary:hover { color: #0d0d0d; background: rgba(254,178,55,0.92); box-shadow: inset 0 0 0 1px var(--btn-orange), 0 8px 24px rgba(254,178,55,0.35); transform: translateY(-2px); } body.btn-preset-ghost .btn-cta-primary:hover::before, body.btn-preset-ghost .btn-cta-primary:hover::after { width: 100%; height: 100%; } body.btn-preset-ghost .btn-cta-primary > * { position: relative; z-index: 2; } body.btn-preset-ghost .btn-cta-primary i, body.btn-preset-ghost .btn-cta-primary svg { transition: transform 0.3s ease; } body.btn-preset-ghost .btn-cta-primary:hover i, body.btn-preset-ghost .btn-cta-primary:hover svg { transform: translateX(3px) translateY(-1px); } body.btn-preset-ghost .btn-pulse { animation: ghostPulse var(--btn-pulse-speed) ease-in-out infinite; } /* Ghost secondary */ body.btn-preset-ghost .btn-cta-secondary { background: transparent; color: var(--dark-text); box-shadow: none; transition: color 0.3s ease, transform .25s ease; } body.btn-preset-ghost .btn-cta-secondary::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px; background: var(--btn-orange); transition: width var(--btn-ghost-trace-speed) ease; z-index: 1; } body.btn-preset-ghost .btn-cta-secondary::after { display: none; } body.btn-preset-ghost .btn-cta-secondary:hover { color: var(--btn-orange); transform: translateY(-2px); } body.btn-preset-ghost .btn-cta-secondary:hover::before { width: 100%; } body.btn-preset-ghost .btn-cta-secondary i, body.btn-preset-ghost .btn-cta-secondary svg { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } body.btn-preset-ghost .btn-cta-secondary:hover i, body.btn-preset-ghost .btn-cta-secondary:hover svg { transform: translateX(7px); } [data-theme="light"] body.btn-preset-ghost .btn-cta-primary { color: #c96d00; box-shadow: inset 0 0 0 1px rgba(232,142,0,0.35); } [data-theme="light"] body.btn-preset-ghost .btn-cta-primary::before { border-color: #e88e00; } [data-theme="light"] body.btn-preset-ghost .btn-cta-primary::after { border-color: #e88e00; } [data-theme="light"] body.btn-preset-ghost .btn-cta-primary:hover { color: #fff !important; background: rgba(232,142,0,0.92) !important; } [data-theme="light"] body.btn-preset-ghost .btn-cta-secondary { color: #1e293b; } [data-theme="light"] body.btn-preset-ghost .btn-cta-secondary:hover { color: #c96d00; } [data-theme="light"] body.btn-preset-ghost .btn-cta-secondary::before { background: #e88e00; } /* ════════════════════════════════════════════════════════════════ PRESET 7 — PLASMA Gradient berputar secara konstan, hover mempercepat + scale Konsep: energi aktif, brand yang bergerak, futuristik Aktifkan: ════════════════════════════════════════════════════════════════ */ @keyframes plasmaRotate { 0% { --plasma-angle: 0deg; } 100% { --plasma-angle: 360deg; } } @keyframes plasmaRotateFast { 0% { --plasma-angle: 0deg; } 100% { --plasma-angle: 360deg; } } @keyframes plasmaPulse { 0%,100% { box-shadow: 0 0 12px rgba(254,178,55,0.2), 0 0 30px rgba(254,83,83,0.1); } 50% { box-shadow: 0 0 20px rgba(254,178,55,0.4), 0 0 50px rgba(254,83,83,0.2); } } @property --plasma-angle { syntax: ''; inherits: false; initial-value: 0deg; } body.btn-preset-plasma .btn-cta-primary { background: conic-gradient(from var(--plasma-angle), #feb237 0%, #f55353 25%, #0c3c6a 50%, #feb237 75%, #feb237 100% ); color: var(--btn-text-light); animation: plasmaRotate var(--btn-plasma-speed) linear infinite; transition: transform .25s ease, box-shadow .3s ease, filter .3s ease; border: none; /* Thin white inner shadow for definition */ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); } /* Inner mask to show only the edge as a gradient border effect */ body.btn-preset-plasma .btn-cta-primary::before { content: ''; position: absolute; inset: 2px; background: var(--dark-surface, #0f1420); border-radius: calc(var(--btn-radius) - 1px); z-index: 1; transition: inset 0.3s ease, opacity 0.3s ease; } body.btn-preset-plasma .btn-cta-primary::after { display: none; } body.btn-preset-plasma .btn-cta-primary > * { position: relative; z-index: 2; /* Text color on dark inner bg */ color: var(--btn-orange); transition: color 0.3s ease; } body.btn-preset-plasma .btn-cta-primary i, body.btn-preset-plasma .btn-cta-primary svg { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } body.btn-preset-plasma .btn-cta-primary:hover { animation-duration: var(--btn-plasma-hover-speed); /* speed up on hover */ transform: scale(1.04) translateY(-2px); box-shadow: 0 8px 32px rgba(254,178,55,0.4), 0 0 60px rgba(254,83,83,0.2); filter: saturate(1.4) brightness(1.1); } body.btn-preset-plasma .btn-cta-primary:hover::before { inset: 0; /* inner mask mengecil → gradient terlihat penuh */ opacity: 0; } body.btn-preset-plasma .btn-cta-primary:hover > * { color: #0d0d0d; } body.btn-preset-plasma .btn-cta-primary:hover i, body.btn-preset-plasma .btn-cta-primary:hover svg { transform: rotate(-10deg) scale(1.2); } body.btn-preset-plasma .btn-pulse { animation: plasmaPulse var(--btn-pulse-speed) ease-in-out infinite, plasmaRotate var(--btn-plasma-speed) linear infinite; } /* Plasma secondary */ body.btn-preset-plasma .btn-cta-secondary { background: transparent; color: var(--dark-text); border: 1px solid transparent; background-clip: padding-box; box-shadow: 0 0 0 1px rgba(254,178,55,0.25); transition: color 0.3s ease, box-shadow 0.3s ease, transform .25s ease; } body.btn-preset-plasma .btn-cta-secondary::before { display: none; } body.btn-preset-plasma .btn-cta-secondary::after { display: none; } body.btn-preset-plasma .btn-cta-secondary:hover { color: var(--btn-orange); box-shadow: 0 0 0 1.5px var(--btn-orange), 0 4px 18px rgba(254,178,55,0.2); transform: translateY(-2px); } body.btn-preset-plasma .btn-cta-secondary i, body.btn-preset-plasma .btn-cta-secondary svg { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } body.btn-preset-plasma .btn-cta-secondary:hover i, body.btn-preset-plasma .btn-cta-secondary:hover svg { transform: translateX(6px); } [data-theme="light"] body.btn-preset-plasma .btn-cta-primary::before { background: #fff; } [data-theme="light"] body.btn-preset-plasma .btn-cta-primary > * { color: #c96d00; } [data-theme="light"] body.btn-preset-plasma .btn-cta-primary:hover > * { color: #fff; } [data-theme="light"] body.btn-preset-plasma .btn-cta-secondary { color: #1e293b; } [data-theme="light"] body.btn-preset-plasma .btn-cta-secondary:hover { color: #c96d00; } /* ════════════════════════════════════════════════════════════════ FALLBACK — Tidak ada class preset di body ════════════════════════════════════════════════════════════════ */ body:not([class*="btn-preset"]) .btn-cta-primary { background: var(--btn-orange); color: var(--btn-text-dark); } body:not([class*="btn-preset"]) .btn-cta-secondary { background: transparent; color: var(--dark-text); box-shadow: inset 0 0 0 1.5px rgba(254,178,55,0.5); }