:where(.wp-element-button, .wp-block-button__link) { background: var(--color-button); color: var(--color-button-text); border: none; border-radius: var(--radius-m); cursor: pointer; font-size: 1rem; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-half); font-weight: 600; letter-spacing: 0.01em; padding: 0.75rem 1.5rem; text-decoration: none; transition: all var(--transition); appearance: none; box-shadow: var(--shadow-sm), 0 4px 16px rgba(var(--color-button-rgb), 0.3); } .wp-block-buttons { margin-block-end: 1.5em; } :where(.wp-element-button, .wp-block-button__link):hover { transform: translateY(-2px); box-shadow: var(--shadow-md), 0 6px 20px rgba(var(--color-button-rgb), 0.4); } :where(.wp-element-button, .wp-block-button__link):active { transform: translateY(0); box-shadow: var(--shadow-sm), 0 2px 8px rgba(var(--color-button-rgb), 0.3); } :where(.wp-element-button, .wp-block-button__link):focus-visible { outline: 2px solid color-mix(in srgb, var(--color-accent), var(--color-text) 25%); outline-offset: 2px; } :is(input[type="submit"], button[type="submit"], button.button, .button, a.button, .button a) { background: linear-gradient(135deg, var(--color-button) 0%, var(--color-button) 100%); border: none; border-radius: var(--radius-m); color: var(--color-button-text); cursor: pointer; font-size: 1rem; font-family: inherit; display: inline-block; font-weight: 600; letter-spacing: 0.01em; padding: 0.875rem 1.5rem; position: relative; text-align: center; text-decoration: none; transition: all var(--transition); appearance: none; box-shadow: var(--shadow-sm), 0 4px 16px rgba(var(--color-button-rgb), 0.3); } :is(input[type="submit"], button[type="submit"], button.button, .button, a.button, .button a):hover { transform: translateY(-2px); box-shadow: var(--shadow-md), 0 6px 20px rgba(var(--color-button-rgb), 0.4); } :is(input[type="submit"], button[type="submit"], button.button, .button, a.button, .button a):active { transform: translateY(0); box-shadow: var(--shadow-sm), 0 2px 8px rgba(var(--color-button-rgb), 0.3); } :is(input[type="submit"], button[type="submit"], button.button, .button, a.button):focus-visible { outline: 2px solid color-mix(in srgb, var(--color-accent), var(--color-text) 25%); outline-offset: 2px; } .button-subtext { font-weight: var(--font-weight); } .button-subtext:empty { display: none; } :is(.button, a.button).button-minimal { background: transparent; border: none; color: var(--color-text); box-shadow: none; padding: 0.5rem 1rem; font-weight: 500; } :is(.button, a.button).button-minimal:hover { background: transparent; color: var(--color-text); box-shadow: none; transform: none; } :is(.button, a.button).button-minimal:active { transform: none; box-shadow: none; opacity: 0.7; } :is(.button, a.button).button-minimal.button-primary { color: var(--color-button); background: rgba(var(--color-button-rgb), 0.08); font-weight: 600; } :is(.button, a.button).button-minimal.button-primary:hover { background: rgba(var(--color-button-rgb), 0.12); color: var(--color-button); } .button.button-sec, a.button.button-sec, .button.button-sec a { background-color: var(--color-button-sec); color: var(--color-button-sec-text); } .button.button-small { font-size: 0.9rem; padding: 0.625rem 1rem; } .button.button-large { font-size: 1.125rem; padding: 1rem 2rem; } .button-text { font-size: var(--fs-m); line-height: var(--lh-tight); } :is(.button, a.button).button-outline { background: transparent; border: 1.5px solid var(--color-border); color: var(--color-text); box-shadow: none; } :is(.button, a.button).button-outline:hover { background: rgba(var(--color-button-rgb), 0.05); border-color: var(--color-button); color: var(--color-button); box-shadow: none; transform: translateY(-2px); } :is(.button, a.button).button-outline:active { transform: translateY(0); box-shadow: none; } .menu .button.button-outline a { background-color: transparent; } .button.button-arrow::after, .button.button-arrow.button-text::after, .menu .button-arrow a::after, .woocommerce ul.products li.product .button::after { content: '\e80f'; display: inline-block; font-family: 'md-icon'; margin-inline-start: 13px; transition: transform var(--transition-slow); } .button.button-arrow:hover::after, .button.button-arrow.button-text::after, .menu .button-arrow a:hover::after, .woocommerce ul.products li.product .button::after { transform: translateX(4px); } .menu .button-arrow::after { display: none; } .button.button-badge { border-bottom: 0; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; padding-inline-end: 84px; position: relative; } .button.button-badge .badge { border-radius: 0 var(--radius-xs) var(--radius-xs) 0; font-size: 20px; height: 100%; padding: 16px; position: absolute; top: 0; right: 0; } @media (min-width: 640px) { .button + .button { margin-inline-start: var(--space-half); } } @media (max-width: 640px) { :is(.button, button[type="submit"], input[type="submit"]) { display: block; width: 100%; } .button + .button { margin-block-start: var(--space-half); } } .badge { display: inline-block; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 600; border-radius: var(--radius-s); line-height: 1.4; background: color-mix(in srgb, var(--color-border), transparent 70%); color: var(--color-text); } .badge-circle{ border-radius: 50%; line-height: 1; padding: 0.25rem; } .badge-success { background: color-mix(in srgb, var(--wp--preset--color--teal) 18%, transparent); color: color-mix(in srgb, var(--wp--preset--color--teal), var(--color-text) 35%); } .badge-warning { background: color-mix(in srgb, var(--wp--preset--color--amber) 18%, transparent); color: color-mix(in srgb, var(--wp--preset--color--amber), var(--color-text) 40%); } .badge-error { background: color-mix(in srgb, var(--wp--preset--color--rose) 18%, transparent); color: color-mix(in srgb, var(--wp--preset--color--rose), var(--color-text) 40%); } .badge-info { background: color-mix(in srgb, var(--wp--preset--color--sky) 18%, transparent); color: color-mix(in srgb, var(--wp--preset--color--sky), var(--color-text) 35%); } .badge-neutral { background: color-mix(in srgb, var(--color-border), transparent 70%); color: var(--color-text); }