turretcss

Button

Button styles are applied directly to the button element, button style and size modifiers do not require the button class added to the button element. Button styles can be set on an achor tag by using the .button class.

Example

HTML

<button>...</button>
<button disabled>...</button>

CSS

--button-padding-vertical: calc((var(--button-height) - var(--button-font-size) - (var(--button-border-width) * 2)) / 2);
--button-padding-horizontal: 1em;
--button-height: var(--height-m);
--button-font-family: inherit;
--button-font-weight: var(--font-weight-semibold);
--button-font-size: var(--font-size-m);
--button-color: var(--dark);
--button-line-height: 1;
--button-letter-spacing: var(--letter-spacing);
--button-text-align: center;
--button-text-transform: none;
--button-background: var(--background);
--button-border-width: var(--border-width);
--button-border-style: var(--border-style);
--button-border-color: var(--border-color);
--button-border-radius: var(--border-radius);
--button-box-shadow: var(--box-shadow);

--button-hover-color: var(--button-color);
--button-hover-background: color-mod(var(--button-background) shade(2.5%));
--button-hover-border-color: color-mod(var(--button-border-color) shade(2.5%));
--button-hover-box-shadow: var(--hover-box-shadow);

--button-active-color: var(--button-color);
--button-active-background: color-mod(var(--button-background) shade(5%));
--button-active-border-color: color-mod(var(--button-border-color) shade(5%));
--button-active-box-shadow: var(--active-box-shadow);

--button-disabled-opacity: 0.65;

Button Spinner

HTML

<button class="spinner" title="Loading"></button>

Button Block

HTML

<button class="button-block">...</button>

CSS

--button-block-text-align: center;

Button Pill

The .button-pill class applies border-radius half the size of the --button-height.

HTML

<button class="button button-pill">...</button>

Button Square

The .button-square class applies the same padding all round calculated from the height of the button minus font-size and border-width.

HTML

<button class="button button-square">...</button>

Button with SVG

A <svg> contained within a button or .button element will inherit the button font-size as the width and height, as well as the button color as fill.

HTML

<button>
  <svg>...</svg>
</button>

Related