diff --git a/src/index.css b/src/index.css index 1a34999..b673d27 100644 --- a/src/index.css +++ b/src/index.css @@ -16,7 +16,7 @@ --background-accent: #222222; /* @layout/border-radius/rounded */ - --radius: 0.25rem; + --radius: 0.5rem; /* @layout/content-width/medium */ --width-content-width: clamp(40rem, 80vw, 100rem); @@ -176,3 +176,16 @@ h6 { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); border: 1px solid var(--color-secondary-cta); } + +.primary-button, +.secondary-button { + transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; +} + +.primary-button:hover { + animation: button-lift-glow-primary 0.4s ease-out forwards; +} + +.secondary-button:hover { + animation: button-lift-glow-secondary 0.4s ease-out forwards; +} diff --git a/src/styles/animations.css b/src/styles/animations.css index d39bb32..7fe25eb 100644 --- a/src/styles/animations.css +++ b/src/styles/animations.css @@ -169,3 +169,22 @@ .animate-progress { animation: progress linear forwards; } + +@keyframes button-lift-glow-primary { + 100% { + transform: translateY(-2px); + box-shadow: + color-mix(in srgb, var(--color-background) 15%, transparent) 0px 4px 10px 0px inset, + color-mix(in srgb, var(--color-background) 15%, transparent) 0px -4px 8px 0px inset, + 0 0 8px var(--primary-cta); + } +} + +@keyframes button-lift-glow-secondary { + 100% { + transform: translateY(-2px); + box-shadow: + 0 1px 2px 0 rgb(0 0 0 / 0.05), + 0 0 8px var(--secondary-cta-text); + } +}