From b65f797cc03e3b112539e6d53f8db4a3646ac3ff Mon Sep 17 00:00:00 2001 From: kudinDmitriyUp Date: Sat, 9 May 2026 19:24:01 +0000 Subject: [PATCH] feat: update button styles to be more 3D --- src/index.css | 40 +++++++++++++++++++++++++++++----------- 1 file changed, 29 insertions(+), 11 deletions(-) diff --git a/src/index.css b/src/index.css index b2a61ae..071096b 100644 --- a/src/index.css +++ b/src/index.css @@ -167,20 +167,38 @@ h6 { /* WEBILD_PRIMARY_BUTTON */ /* @primaryButtons/depth-layers */ background: var(--color-primary-cta); - box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary-cta) 20%, transparent), 0 2px 4px color-mix(in srgb, var(--color-primary-cta) 20%, transparent), 0 4px 8px color-mix(in srgb, var(--color-primary-cta) 15%, transparent), 0 8px 16px color-mix(in srgb, var(--color-primary-cta) 10%, transparent), 0 16px 32px color-mix(in srgb, var(--color-primary-cta) 5%, transparent); + border-top: 1px solid color-mix(in srgb, var(--color-primary-cta) 80%, #fff); + border-bottom: 1px solid color-mix(in srgb, var(--color-primary-cta) 80%, #000); + box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08); + transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; +} + +.primary-button:hover { + transform: translateY(-2px); + box-shadow: 0 7px 14px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.08); +} + +.primary-button:active { + transform: translateY(1px); + box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.08); } .secondary-button { /* WEBILD_SECONDARY_BUTTON */ /* @secondaryButtons/layered */ - background: - linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 59.26%), - linear-gradient(var(--color-secondary-cta), var(--color-secondary-cta)), - linear-gradient(var(--color-secondary-cta), var(--color-secondary-cta)), - linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 59.26%), - linear-gradient(color-mix(in srgb, var(--color-secondary-cta) 60%, transparent), color-mix(in srgb, var(--color-secondary-cta) 60%, transparent)), - var(--color-secondary-cta); - box-shadow: - 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent); - border: 1px solid var(--color-secondary-cta); + background: var(--color-secondary-cta); + border-top: 1px solid color-mix(in srgb, var(--color-secondary-cta) 80%, #fff); + border-bottom: 1px solid color-mix(in srgb, var(--color-secondary-cta) 80%, #000); + box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08); + transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; +} + +.secondary-button:hover { + transform: translateY(-2px); + box-shadow: 0 7px 14px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.08); +} + +.secondary-button:active { + transform: translateY(1px); + box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.08); }