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)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin anywhere below.

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

Source code (anchor)

See customizing for information about using the Sass and CSS variables in the source code to customize the styles, and Sass functionality (on the using StyleMods page) for other ways to use the variables to create custom styles.

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