From 4f795f3a9ac4d1ac7a7fa4de06a99567ca054325 Mon Sep 17 00:00:00 2001 From: kudinDmitriyUp Date: Fri, 15 May 2026 12:34:51 +0000 Subject: [PATCH] Make buttons more 3D with enhanced hover effects --- src/index.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/index.css b/src/index.css index b5e72c0..70fc77e 100644 --- a/src/index.css +++ b/src/index.css @@ -169,13 +169,13 @@ h6 { /* WEBILD_PRIMARY_BUTTON */ /* @primaryButtons/metallic */ background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 0%, var(--color-primary-cta) 25%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 50%, var(--color-primary-cta) 75%, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) 100%); - box-shadow: inset 0 2px 0 0 color-mix(in srgb, var(--color-foreground) 30%, transparent), 0 6px 16px -4px color-mix(in srgb, var(--color-background) 50%, transparent); + box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--color-foreground) 30%, transparent), inset 0 2px 0 0 color-mix(in srgb, var(--color-background) 50%, transparent), 0 6px 16px -4px color-mix(in srgb, var(--color-background) 50%, transparent); transition: all 0.2s ease-in-out; } .primary-button:hover { transform: translateY(-2px); - box-shadow: inset 0 2px 0 0 color-mix(in srgb, var(--color-foreground) 30%, transparent), 0 8px 20px -4px color-mix(in srgb, var(--color-background) 50%, transparent); + box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--color-foreground) 30%, transparent), inset 0 2px 0 0 color-mix(in srgb, var(--color-background) 50%, transparent), 0 8px 20px -4px color-mix(in srgb, var(--color-background) 50%, transparent); } .secondary-button { @@ -189,7 +189,8 @@ h6 { 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: - inset 0 2px 0 0 color-mix(in srgb, var(--color-secondary-cta) 60%, transparent), + inset 0 -2px 0 0 color-mix(in srgb, var(--color-secondary-cta) 60%, transparent), + inset 0 2px 0 0 color-mix(in srgb, var(--color-background) 50%, transparent), 0 6px 16px -4px color-mix(in srgb, var(--color-accent) 10%, transparent); transition: all 0.2s ease-in-out; } @@ -197,6 +198,7 @@ h6 { .secondary-button:hover { transform: translateY(-2px); box-shadow: - inset 0 2px 0 0 color-mix(in srgb, var(--color-secondary-cta) 60%, transparent), + inset 0 -2px 0 0 color-mix(in srgb, var(--color-secondary-cta) 60%, transparent), + inset 0 2px 0 0 color-mix(in srgb, var(--color-background) 50%, transparent), 0 8px 20px -4px color-mix(in srgb, var(--color-accent) 10%, transparent); } -- 2.49.1