All Buttons

Type: Mixin

@include all-buttons();

* You can call mixins with or without gls- namespace (e.g. @include gls-all-buttons();).

All Buttons Sass mixin helps you to target all the HTML button elements in the DOM so you can easily apply your style rules.

Github Source Code

Arguments

Name	Type	Description
`$pseudo`	`string`	Sets the pseudo-class selector of the selected button elements. Accepts `hover`, `focus`, `active`, `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;
}