From d0f9716c8a08441c130c50af384a8cd5eb89a162 Mon Sep 17 00:00:00 2001 From: kudinDmitriyUp Date: Tue, 28 Apr 2026 23:03:39 +0000 Subject: [PATCH] Bob AI: make the buttons on the Italian restaurant website feel more --- src/index.css | 37 ++++++++++++++++++++++++++++++++----- 1 file changed, 32 insertions(+), 5 deletions(-) diff --git a/src/index.css b/src/index.css index 2c234d3..ff6db15 100644 --- a/src/index.css +++ b/src/index.css @@ -171,13 +171,40 @@ h6 { .primary-button { /* WEBILD_PRIMARY_BUTTON */ - /* @primaryButtons/soft-glow */ - background: radial-gradient(ellipse at 50% -20%, color-mix(in srgb, var(--color-primary-cta) 70%, var(--color-foreground)) 0%, var(--color-primary-cta) 70%); - box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--color-primary-cta) 35%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 20%, transparent); + /* @primaryButtons/3d */ + background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary-cta) 85%, white) 0%, var(--color-primary-cta) 100%); + box-shadow: + inset 0 1px 1px color-mix(in srgb, var(--color-primary-cta-text) 30%, transparent), + 0 4px 0 color-mix(in srgb, var(--color-primary-cta) 60%, black), + 0 6px 10px rgba(0, 0, 0, 0.3); + transform: translateY(0); + transition: transform 0.1s, box-shadow 0.1s; +} + +.primary-button:active { + transform: translateY(4px); + box-shadow: + inset 0 1px 1px color-mix(in srgb, var(--color-primary-cta-text) 30%, transparent), + 0 0px 0 color-mix(in srgb, var(--color-primary-cta) 60%, black), + 0 2px 4px rgba(0, 0, 0, 0.3); } .secondary-button { /* WEBILD_SECONDARY_BUTTON */ - /* @secondaryButtons/solid */ - background: var(--color-secondary-cta); + /* @secondaryButtons/3d */ + background: linear-gradient(180deg, color-mix(in srgb, var(--color-secondary-cta) 85%, white) 0%, var(--color-secondary-cta) 100%); + box-shadow: + inset 0 1px 1px color-mix(in srgb, var(--color-secondary-cta-text) 30%, transparent), + 0 4px 0 color-mix(in srgb, var(--color-secondary-cta) 60%, black), + 0 6px 10px rgba(0, 0, 0, 0.15); + transform: translateY(0); + transition: transform 0.1s, box-shadow 0.1s; } + +.secondary-button:active { + transform: translateY(4px); + box-shadow: + inset 0 1px 1px color-mix(in srgb, var(--color-secondary-cta-text) 30%, transparent), + 0 0px 0 color-mix(in srgb, var(--color-secondary-cta) 60%, black), + 0 2px 4px rgba(0, 0, 0, 0.15); +} \ No newline at end of file -- 2.49.1