turretcss

Button Sizes

Example

HTML

<button class="button button-xxl">...</button>
<button class="button button-xl">...</button>
<button class="button button-l">...</button>
<button class="button">...</button>
<button class="button button-s">...</button>
<button class="button button-xs">...</button>
<button class="button button-xxs">...</button>

CSS

--button-xxl-padding-vertical: calc((var(--button-xxl-height) - var(--button-xxl-font-size) - (var(--button-border-width) * 2)) / 2);
--button-xxl-padding-horizontal: var(--button-padding-horizontal);
--button-xxl-height: var(--height-xxl);
--button-xxl-font-size: var(--font-size-xxl);

--button-xl-padding-vertical: calc((var(--button-xl-height) - var(--button-xl-font-size) - (var(--button-border-width) * 2)) / 2);
--button-xl-padding-horizontal: var(--button-padding-horizontal);
--button-xl-height: var(--height-xl);
--button-xl-font-size: var(--font-size-xl);

--button-l-padding-vertical: calc((var(--button-l-height) - var(--button-l-font-size) - (var(--button-border-width) * 2)) / 2);
--button-l-padding-horizontal: var(--button-padding-horizontal);
--button-l-height: var(--height-l);
--button-l-font-size: var(--font-size-l);

--button-s-padding-vertical: calc((var(--button-s-height) - var(--button-s-font-size) - (var(--button-border-width) * 2)) / 2);
--button-s-padding-horizontal: var(--button-padding-horizontal);
--button-s-height: var(--height-s);
--button-s-font-size: var(--font-size-s);

--button-xs-padding-vertical: calc((var(--button-xs-height) - var(--button-xs-font-size) - (var(--button-border-width) * 2)) / 2);
--button-xs-padding-horizontal: var(--button-padding-horizontal);
--button-xs-height: var(--height-xs);
--button-xs-font-size: var(--font-size-xs);

--button-xxs-padding-vertical: calc((var(--button-xxs-height) - var(--button-xxs-font-size) - (var(--button-border-width) * 2)) / 2);
--button-xxs-padding-horizontal: var(--button-padding-horizontal);
--button-xxs-height: var(--height-xxs);
--button-xxs-font-size: var(--font-size-xxs);

Anchors

HTML

<a href="..." class="button button-xxl">...</a>
<a href="..." class="button button-xl">...</a>
<a href="..." class="button button-l">...</a>
<a href="..." class="button">...</a>
<a href="..." class="button button-s">...</a>
<a href="..." class="button button-xs">...</a>
<a href="..." class="button button-xxs">...</a>

Related