Button Padding Mixin

readme.md

Button Padding Mixin

I find myself consistently adding one value to surround a buttons padding and then dividing top and bottom values by 2 or less to get button backgrounds to look right.

This mixin allows you to use one value and have it calculate the divisions for you.

Usage

@include button-padding(1rem);

Outputs

.button {
  padding: 0.5rem 1rem;
}

Variable Denominator

If you would like to alter the default denominator you can do so like this

@include button-padding(1rem, 1.5);

Outputs

.element {
  padding: 0.6667rem 1rem;
}

button-padding-mixin.scss

@mixin button-padding($amount, $denominator: 2) {
  padding: $amount/$denominator $amount;
}