Buttons

Basic button utilities including size modifiers, button group utilities and pagination styles.

Examples (anchor)

Please note. The buttons will inherit whatever normalize/reset styles are present requiring only minor adjustments to suit base font property values, but as demonstrated they've been designed to work seamlessly with the StyleMods content styles.

Button utility (anchor)

The .btn utility replicates the default button styles and variables included with the forms and buttons to provide design continuity if using and customizing both style modules.

Link 

<a href="#" class="btn">Link</a>
<button>Button</button>

If the forms and buttons are not included the .btn utility can be used to apply the styles:

<button class="btn">Button</button

Outline buttons (anchor)

Link 

<a href="#" class="btn btn-outline">Link</a>
<button class="btn-outline">Button</button>

Button sizes (anchor)

<button class="btn-xs">Extra small</button>
<button class="btn-sm">Small</button>
<button>Normal</button>
<button class="btn-lg">Large</button>
<button class="btn-xl">Extra large</button>

Button groups (anchor)

Button groups can be included as individual buttons and links and/or using ordered and unordered lists:

  1. 1
  2. 2
  3. 3
<div class="btn-group">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<ol class="btn-group">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ol>

For vertical button groups a column style is also included:

<div class="btn-group-column">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<ul class="btn-group-column">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ul>

Button flex (anchor)

A simple flex wrap container for individual buttons or links and/or ordered and unordered lists:

  1. 1
  2. 2
  3. 3
<div class="btn-flex">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<ol class="btn-flex">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ol>

Buttons can also be grouped with a flex column style:

  1. 1
  2. 2
  3. 3
<div class="btn-flex-column">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<ol class="btn-flex-column">
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
</ol>

Pagination buttons (anchor)

Previous and next pagination icon buttons (designed to meet accessibility requirements) can also be included with either the button group or flex utilities if required.

Previous page 1 2 3 Next page 
<div class="btn-group">
  <a href="#" class="btn btn-previous"><span>Previous page</span></a>
  <a href="#" class="btn">1</a>
  <a href="#" class="btn">2</a>
  <a href="#" class="btn">3</a>
  <a href="#" class="btn btn-next"><span>Next page</span></a>
</div>
<ul class="btn-flex">
  <li><a href="#" class="btn btn-previous"><span>Previous page</span></a></li>
  <li><a href="#" class="btn">1</a></li>
  <li><a href="#" class="btn">2</a></li>
  <li><a href="#" class="btn">3</a></li>
  <li><a href="#" class="btn btn-next"><span>Next page</span></a></li>
</ul>

Up and down icon buttons are provided for the vertical column utilities*:

Previous page 1 2 3 Next page
Previous page 1 2 3 Next page 
<div class="btn-group-column">
  <a href="#" class="btn btn-up"><span>Previous page</span></a>
  <a href="#" class="btn">1</a>
  <a href="#" class="btn">2</a>
  <a href="#" class="btn">3</a>
  <a href="#" class="btn btn-down"><span>Next page</span></a>
</div>
<div class="btn-flex-column">
  <a href="#" class="btn btn-up"><span>Previous page</span></a>
  <a href="#" class="btn">1</a>
  <a href="#" class="btn">2</a>
  <a href="#" class="btn">3</a>
  <a href="#" class="btn btn-down"><span>Next page</span></a>
</div>

*These currently only work correctly with individual buttons or links as shown above due to a (currently) unresolved display issue when using the buttons with the ordered or unordered list grouped styles.

Fixed light and dark (anchor)

Link button light Link button dark

<a href="#" class="btn btn-light">Link button light</a>
<a href="#" class="btn btn-dark">Link button dark</a>
<button class="btn btn-light">HTML button light</button> 
<button class="btn btn-dark">HTML button dark</button>

Using the module (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

custom.scss 
@use "stylemods/scss" as *;
@include buttons-css;

See the using modules page for more information including how to compile the modules in cascade layers and include and reuse them in multiple source files.

Using the framework (anchor)

Using the recommended custom setup enable the styles in an overrides document:

overrides.scss 
@use "stylemods/scss/configuration" as *;
$enable-buttons: true;

Include the overrides and the framework styles with your custom document for compiling the framework:

custom.scss 
@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information including how the styles can also be compiled within cascade layers.

Source code (anchor)

The modules and the framework follow the same methods for customizing the default values and using the CSS variables to create custom theme documents. See the customizing page for more information.

buttons.scss 
// ---------------------------------------------------------- 
// Buttons
// ----------------------------------------------------------
$btn-text-color:            var(--btn-text, CanvasText) !default;
$btn-font-size:             var(--btn-fs, inherit) !default;
$btn-padding-block:         var(--btn-py, 0.313rem) !default;
$btn-padding-inline:        var(--btn-px, 0.9rem) !default;  
$btn-border-color:          var(--btn-bd-color, color-mix(in srgb, CanvasText 22%, Canvas)) !default;
$btn-radius:                var(--btn-radius, 0.188rem) !default;
$btn-background-color:      var(--btn-bg, color-mix(in srgb, CanvasText 4%, Canvas)) !default;
$btn-background-hover:      var(--btn-hover, color-mix(in srgb, CanvasText 8%, Canvas)) !default;
$btn-focus-shadow:          var(--focus-shadow, 0 0 0 0.06rem) !default;
$btn-focus-shadow-color:    var(--focus-color, color-mix(in srgb, CanvasText 22%, Canvas)) !default;

// Pagination buttons
$btn-pagination-previous:   url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m6 8 4-4v8z'/></svg>") !default;
$btn-pagination-next:       url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m10 8-4 4-9e-7 -8z'/></svg>");
$btn-pagination-up:         url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 6 4 4-8 7e-7z'/></svg>") !default;
$btn-pagination-down:       url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 10-4-4h8z'/></svg>") !default;


@mixin buttons-css {

.btn {
  color: $btn-text-color;
  font-size: $btn-font-size;
  line-height: inherit;
  text-align: center;
  text-decoration: none;
  display: var(--btn-d, inline-block); 
  padding-block: $btn-padding-block;
  padding-inline: $btn-padding-inline;  
  border: 1px solid $btn-border-color;
  border-radius: $btn-radius;
  background-color: $btn-background-color;
  cursor: pointer;
  -webkit-appearance: button;
}

.btn:is(:hover, :focus, :active) {
  color: $btn-text-color;
  background-color: $btn-background-hover;
}

.btn:focus {
  outline: none;
  box-shadow: $btn-focus-shadow $btn-focus-shadow-color;
}

.btn:focus:not(:focus-visible) {  
  box-shadow: none;
  background-color: $btn-background-color;
}
  
.btn:focus:not(:focus-visible):hover {
  background-color: $btn-background-hover;
}

.btn-outline {
  --btn-bg: transparent;
}

// Button sizes
.btn-xs {
  --btn-fs: 0.75em;
  --btn-py: .188rem;
  --btn-px: .625rem;
}

.btn-sm {
  --btn-fs: 0.88em;
  --btn-py: .25rem;
  --btn-px: .75rem;
}

.btn-lg {
  --btn-fs: 1.1em;
  --btn-py: 0.4rem;
  --btn-px: 1rem;
}

.btn-xl {
  --btn-fs: 1.25em;
  --btn-py: .5rem;
  --btn-px: 1.125rem;
}

.btn-img {
  padding: 0;
}

.btn-img img {
  border-radius: calc($btn-radius - 1px);
}

.btn-img:hover {
  cursor: zoom-in;
}

// Button groups
.btn-group, .btn-group-column {
  display: flex;
}

:where(.btn-group, .btn-group-column, .btn-flex, .btn-flex-column):is(ol, ul) {
  list-style-type: "";
  padding-inline-start: 0;
}

:is(.btn-group, .btn-group-column) *,
:is(.btn-group, .btn-group-column) *:is(li) :is(.btn, button) {
  border-radius: 0;
}

:is(.btn-group, .btn-group-column) :focus {
  box-shadow: none;
}

:where(.btn-group, .btn-group-column, .btn-flex, .btn-flex-column) [aria-current="page"] {
  color: $btn-text-color;
  background-color: $btn-background-hover;
}

.btn-group *:not(:first-child) {
  margin-inline-start: -1px;
}

.btn-group *:first-child,
.btn-group *:is(li):first-child * {
  border-start-start-radius: $btn-radius;
  border-end-start-radius: $btn-radius;
}

.btn-group *:last-child,
.btn-group *:is(li):last-child * {
  border-start-end-radius: $btn-radius;
  border-end-end-radius: $btn-radius;
}

.btn-group-column {
  flex-direction: column;
  inline-size: fit-content;
}

.btn-group-column *:not(:first-child) {
  margin-block-start: -1px;
}

.btn-group-column *:first-child,
.btn-group-column *:is(li):first-child * {
  border-start-start-radius: $btn-radius;
  border-start-end-radius: $btn-radius;
}

.btn-group-column *:last-child,
.btn-group-column *:is(li):last-child * {
  border-end-start-radius: $btn-radius;
  border-end-end-radius: $btn-radius;
}

.btn-flex, .btn-flex-column {
  display: flex;
  gap: var(--btn-gap, 0.33rem);
}

.btn-flex {
  flex-wrap: wrap;
}

.btn-flex-column {
  flex-direction: column;
  inline-size: fit-content;
}

.btn-previous, .btn-next, .btn-up, .btn-down, .btn-ico {
  padding-inline: calc($btn-padding-inline * 0.66); 
}

:where(.btn-previous, .btn-next, .btn-up, .btn-down):before {
  display: inline-block;
  content: "";
  block-size: 1em;
  inline-size: 1em;  
  vertical-align: -0.115em;
  background-color: $btn-text-color;
  mask-image: var(--svg);
  mask-repeat: no-repeat;
}

.btn-previous {
  --svg: #{$btn-pagination-previous};
}

.btn-next {
  --svg: #{$btn-pagination-next};
}

.btn-up {
  --svg: #{$btn-pagination-up};
}

.btn-down {
  --svg: #{$btn-pagination-down};
}

:is(.btn-previous, .btn-next, .btn-up, .btn-down) span {
  position: absolute;
  block-size: 1px;
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.btn-light {
  color-scheme: light;
}

.btn-dark {
  color-scheme: dark;
}

} // end buttons-css