CodePen

HTML

            
              <div style="max-width:250px; width:100%;">
  <button type="submit" class="action">Button text</button>
  <button type="submit" class="action-light">Button text</button>
  <button type="submit" class="action-dark">Button text</button>
  <button type="submit" class="danger">Button text</button>
  <button type="submit" class="warning">Button text</button>
  <button type="submit" class="success">Button text</button>
  <button type="submit" class="info">Button text</button>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
// Misc
$border-radius: 4px;

// Colors
$action-light-color: #d8d8d8;
$action-dark-color: #585858;
$action-color: #66aaff;
$danger-color: #ff563f;
$warning-color: #ff933f;
$success-color: #97c16b;
$info-color: #91e1ff;


// Box
$box-heading-background-color: #e1e1e1;

// Text
$anchor-color: #84B9D3;
$text-color: #9E9E9E;
$input-background-color: #fff;
$input-border-color: #ccc;
@mixin button($color, $textcolor: white, $intensity: 5%) {
	@include gradient($color);
	color: $textcolor;
	border-bottom: 1px solid darken($color, 20%);	
  cursor: pointer;

	&:hover{
		@include gradient(darken($color, 5%));
	}

	&:active{
		@include inverse-gradient(darken($color, 5%));	
		border-bottom:0;
		margin: 1px 0 15px 0;
		height: 34px;
		@include box-shadow(inset 0 1px 3px 1px rgba(0,0,0,.3));
	}
  
  &:focus{
    outline: none;
  }
  
}

@mixin gradient($color, $intensity: 5%) {
	@include background-image(linear-gradient($color, darken($color, $intensity))); 	
}

@mixin inverse-gradient($color, $intensity: 5%) {
	@include background-image(linear-gradient(darken($color, $intensity), $color)); 	
}

button[type="submit"]{
	width: 100%;
	height: 35px;
	border:none;
	border-radius: $border-radius;
	margin: 0 0 15px 0;
	font-size: 12px;
	color: #fff;
	letter-spacing: 0.1em;
	overflow:hidden;
	text-overflow: ellipsis;

	&.action-light{
		@include button($action-light-color, darken($action-light-color, 50%));
	}

	&.action{
		@include button($action-color);
	}

	&.success{
		@include button($success-color);
	}

	&.danger{
		@include button($danger-color);
	}

	&.warning{
		@include button($warning-color);
	}

	&.info{
		@include button($info-color, darken($info-color, 50%));
	}

	&.action-dark{
		@include button($action-dark-color);
	}

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

JS

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