CodePen

HTML

            
              <div style="padding: 20px">
  
  <a href="#" class="button-red">Red Button</a>
  
  <a href="#" class="button-blue">Blue Button</a>
  
  <a href="#" class="button-orange">Orange Button</a>
  
</div>

            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @mixin static($mixin-name, $extend: true) {
	// set global variable if it doesn't already exist
	$Placeholder-Selectors: () !global !default;

	$selector: map-get($Placeholder-Selectors, $mixin-name);

	@if $extend == true {
		@if $selector == null {
			$selector: unique-id();
			$Placeholder-Selectors: map-merge($Placeholder-Selectors, ($mixin-name: $selector)) !global;
			
			@at-root %#{$selector} {
				@include static($mixin-name, false) {
					@content;
				};
			}
		}
		
		@extend %#{$selector};
	} @else {
		@content;
	}
}

//----------------------

@mixin button($color) {
	@include static('button') {
		border: 1px solid;
		border-radius: 5px;
		padding: .25em .5em;
     display: inline-block;
     color: #fff;
     text-decoration: none;

		&:hover {
			cursor: pointer;
		}
	}

	background-color: $color;
	border-color: mix(black, $color, 25%);

	&:hover {
		background-color: mix(black, $color, 15%);
		border-color: mix(black, $color, 40%);
	}
}

//----------------------

.button-red {
  @include button(#a63838);
}

.button-blue {
  @include button(#462cab);
}

.button-orange {
  @include button(#EDA93B);
}


            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................