bender/66870050-3e1e-4df2-b984-98298884873e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update button styles to be more 3D

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-05-09 19:24:01 +00:00
parent 4375d60256
commit b65f797cc0
1 changed files with 29 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/index.css
View File

@@ -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);
}