All Buttons

Arguments

NameTypeDescription
$pseudostring

Sets the pseudo-class selector of the selected button elements. Accepts hover, focusactive, disabled values.

* You can call the mixin either at the root level of your style sheet to target all the HTML button elements in the DOM or call it in a parent selector to target its children.

Examples

Simply call the mixin at the root level of your style sheet to target all the HTML button elements.

@include all-buttons {
  background-color: teal;
  color: white;
}
//CSS Output
button,
[type="button"],
[type="reset"],
[type="submit"] {
  background-color: teal;
  color: white;
}

Now pass the hover value as an argument to style all the text-based HTML inputs when they’re in the :hover state.

@include all-buttons(hover) {
  background-color: crimson;
  color: white;
}
//CSS Output
button:hover, 
[type='button']:hover, 
[type='reset']:hover, 
[type='submit']:hover {
  background-color: crimson;
  color: white;
}

Now, let’s try it again with all the possible pseudo-class selectors.

@include all-buttons {
  background-color: teal;
  color: white;
}
@include all-buttons(hover) {
  background-color: teal;
  color: white;
}
@include all-buttons(focus) {
  background-color: purple;
  color: white;
}
@include all-buttons(active) {
  background-color: blue;
  color: white;
}
@include all-buttons(disabled) {
  background-color: gray;
  color: black;
}
//CSS Output
button,
[type="button"],
[type="reset"],
[type="submit"] {
  background-color: teal;
  color: white;
}
button:hover, 
[type='button']:hover, 
[type='reset']:hover, 
[type='submit']:hover {
  background-color: teal;
  color: white;
}
button:focus, 
[type='button']:focus, 
[type='reset']:focus, 
[type='submit']:focus {
  background-color: purple;
  color: white;
}
button:active, 
[type='button']:active, 
[type='reset']:active, 
[type='submit']:active {
  background-color: blue;
  color: white;
}
button:disabled, 
[type='button']:disabled, 
[type='reset']:disabled, 
[type='submit']:disabled {
  background-color: gray;
  color: black;
}

Call the mixin in a selector to target only those button elements inside that selector.

.containing-element {
  @include all-buttons {
    background-color: teal;
    color: white;
  }
}
//CSS Output
.containing-element button, 
.containing-element [type='button'], 
.containing-element [type='reset'], 
.containing-element [type='submit'] {
  background-color: teal;
  color: white;
}