Skip to content

Instantly share code, notes, and snippets.

@domwashburn
Last active September 21, 2022 14:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save domwashburn/d8835022db7414314faf to your computer and use it in GitHub Desktop.
Save domwashburn/d8835022db7414314faf to your computer and use it in GitHub Desktop.
BEM Buttons
<a class="btn--primary--sm">Test</a>
<a class="btn--secondary--lrg">Test</a>
.btn, .btn--sm, .btn--primary--sm, .btn--secondary--sm, .btn--med, .btn--primary--med, .btn--secondary--med, .btn--lrg, .btn--primary--lrg, .btn--secondary--lrg {
border: 1px solid;
border-radius: 3px;
border-radius: 0.1875rem;
display: inline-block;
text-decoration: none;
}
.btn:hover, .btn--sm:hover, .btn--primary--sm:hover, .btn--secondary--sm:hover, .btn--med:hover, .btn--primary--med:hover, .btn--secondary--med:hover, .btn--lrg:hover, .btn--primary--lrg:hover, .btn--secondary--lrg:hover, .btn:active, .btn--sm:active, .btn--primary--sm:active, .btn--secondary--sm:active, .btn--med:active, .btn--primary--med:active, .btn--secondary--med:active, .btn--lrg:active, .btn--primary--lrg:active, .btn--secondary--lrg:active {
text-decoration: none;
}
.btn--primary, .btn--primary--sm, .btn--primary--med, .btn--primary--lrg {
border-color: #f00;
color: #f00;
}
.btn--primary:hover, .btn--primary--sm:hover, .btn--primary--med:hover, .btn--primary--lrg:hover {
border-color: #cc0000;
background-color: #f00;
}
.btn--primary:active, .btn--primary--sm:active, .btn--primary--med:active, .btn--primary--lrg:active {
border-color: #b30000;
}
.btn--sm, .btn--primary--sm, .btn--secondary--sm {
font-size: 0.75rem;
padding: 0.375rem 0.5625rem;
}
.btn--med, .btn--primary--med, .btn--secondary--med {
font-size: 0.875rem;
padding: 0.4375rem 0.65625rem;
}
.btn--lrg, .btn--primary--lrg, .btn--secondary--lrg {
font-size: 1.5rem;
padding: 0.75rem 1.125rem;
}
.btn, .btn--sm, .btn--primary--sm, .btn--secondary--sm, .btn--med, .btn--primary--med, .btn--secondary--med, .btn--lrg, .btn--primary--lrg, .btn--secondary--lrg {
border: 1px solid;
border-radius: 5px;
border-radius: 0.3125rem;
display: inline-block;
text-decoration: none;
}
.btn:hover, .btn--sm:hover, .btn--primary--sm:hover, .btn--secondary--sm:hover, .btn--med:hover, .btn--primary--med:hover, .btn--secondary--med:hover, .btn--lrg:hover, .btn--primary--lrg:hover, .btn--secondary--lrg:hover, .btn:active, .btn--sm:active, .btn--primary--sm:active, .btn--secondary--sm:active, .btn--med:active, .btn--primary--med:active, .btn--secondary--med:active, .btn--lrg:active, .btn--primary--lrg:active, .btn--secondary--lrg:active {
text-decoration: none;
}
.btn--secondary, .btn--secondary--sm, .btn--secondary--med, .btn--secondary--lrg {
border-color: #45fe00;
color: #45fe00;
}
.btn--secondary:hover, .btn--secondary--sm:hover, .btn--secondary--med:hover, .btn--secondary--lrg:hover {
border-color: #37cb00;
background-color: #45fe00;
}
.btn--secondary:active, .btn--secondary--sm:active, .btn--secondary--med:active, .btn--secondary--lrg:active {
border-color: #30b200;
}
.btn--sm, .btn--primary--sm, .btn--secondary--sm {
font-size: 0.75rem;
padding: 0.375rem 0.5625rem;
}
.btn--med, .btn--primary--med, .btn--secondary--med {
font-size: 0.875rem;
padding: 0.4375rem 0.65625rem;
}
.btn--lrg, .btn--primary--lrg, .btn--secondary--lrg {
font-size: 1.5rem;
padding: 0.75rem 1.125rem;
}
<a class="btn--primary--sm">Test</a>
<a class="btn--secondary--lrg">Test</a>
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
//determine rem value for functions
$rem-base: 16;
//Button Map
$btn-size-map: (
sm : 12,
med : 14,
lrg : 24
);
//rem Function
@function rem($px: 16) {
@return ($px/$rem-base)+rem;
}
//rem Line Height
@function rem-lh($px: $rem-base, $scale: 1.5) {
@return ( ($px / $rem-base) * $scale ) + rem;
}
$primary-color : #f00;
$light-text-color : #e6f4ee;
$font-size : 12;
@mixin btn ($class, $color, $display: null, $hover-text: null, $text-decoration: none, $text-transform: null, $radius: null) {
.btn {
border: 1px solid;
border-radius: $radius + px;
border-radius: rem($radius);
box-sizing: $display;
display: inline-block;
text-decoration: $text-decoration;
text-transform: $text-transform;
&:hover, &:active {
text-decoration: $text-decoration;
}
}
.btn--#{$class} {
border-color: $color;
color: $color;
&:hover {
border-color: darken( $color , 10% );
background-color: $color;
color: $hover-text;
}
&:active {
border-color: darken( $color , 15% );
}
}
@each $btn-size, $btn-font-size in $btn-size-map {
.btn--#{$btn-size}, {
@extend .btn;
font-size: rem($btn-font-size);
padding: rem(($btn-font-size*.5)) rem(($btn-font-size*.75));
}
.btn--#{$class}--#{$btn-size} {
@extend .btn--#{$btn-size}, .btn--#{$class};
}
}
}
@include btn(primary, $primary-color, $radius: 3);
@include btn(secondary, #45fe00, $radius: 5);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment