Sass Buttons

Mixins- Border Radius & Darken Functions

by Ben Graham

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="container">
  <button class="btn brand-success">
    Save
  </button>
  <button class="btn brand-info">
    Update
  </button>
  <button class="btn brand-danger">
    Delete
  </button>
</section>

SCSS

// Variables
$brand-success:#28a428;
$brand-info: #0068cd;
$brand-danger: #ff3333;
$brand-light: #FAFAFA;

//Mixins 
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

@mixin transition($args) {
    -moz-transition:$args;
    -o-transition:$args;
    -webkit-transition:$args;
    transition:$args;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height:280px;
width: 100%;
margin: 0 auto;
background: $brand-light;
padding: .8rem;
}


//Buttons
.btn {
	color:$brand-light;
	@include border-radius(20px);
  @include transition(all .4s ease-in-out);
	padding: 10px 20px;
  min-width: 120px;
	margin: 30px;
	&:hover{
		color:$brand-light;
    min-width: 140px;
    padding: 11px 20px;
	}	
}

.brand-success {
  background-color: $brand-success;
  &:hover {
    background-color: darken($brand-success, 10%);
  	}
	}
.brand-info {
  background-color:$brand-info;
  &:hover {
    background-color: darken($brand-info, 10%);
  }
	}

.brand-danger {
  background-color: $brand-danger;
  &:hover {
    background-color: darken($brand-danger, 15%);
  }
}