Themeable Button SCSS

// Thanks to twitter.com/carmat71 for the edited version

// Mixins
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -o-transition: $args;
  transition: $args;
}

// Variables / Maps
$theme: (
  btn-name: #btn-color
);

.btn {
	display: inline-block; 
	padding: 10px 18px;
	border: 2px solid;
	border-radius: 7px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #ffffff;
	cursor: pointer;
	margin: 1em 0;
	font-weight: 700;
  font-size: 1em;
	text-decoration: none;
  text-shadow: 0 .063em rgba(0,0,0,.3);
  
  @include transition(0.2s ease-in-out);
}

@each $button,$color in $theme {
  .btn-#{$button} {
    border-color: darken($color, 10%);
    background-color: $color;
    
    &:hover {
      background-color: darken($color, 10%);
    }
  }
}