Complex Button Mixin (Sass/Scss)

Complex-Button-Mixin-(Sass-Scss).markdown

Complex Button Mixin (Sass/Scss)

A Pen by Erik Uunila on CodePen.

License.

index.html

<h2>Button</h2>
<p>
  <a class="button button-small button-solid button-bordered color-red">Submit</a>
</p>
<hr />
<h3>Available Classes</h3>
<p><strong>Enable button:</strong> .button</p>
<p><strong>Button Size:</strong> .button-small</p>
<p><strong>Button Border:</strong> .button-bordered</p>
<p>
  <strong>Button Colo(u)rs:</strong>
  <ul>
    <li>.color-gold</li>
    <li>.color-purple</li>
    <li>.color-blue</li>
    <li>.color-lightblue</li>
    <li>.color-green</li>
    <li>.color-red</li>
    <li>.color-black</li>
    <li>.color-white</li>
  </ul>
</p>

style.scss

@import "compass/css3";
// VARIABLES
// ------------------------------

// Alternate Colors
$gold		    : rgb(234, 170, 0);
$purple		  : rgb(149, 149, 210);
$blue		    : rgb(7, 114, 206);
$lightblue	: rgb(65, 182, 230);
$green		  : rgb(100, 167, 11);
$red		    : rgb(218, 41, 28);
$black		  : rgb(0, 0, 0);
$white		  : rgb(255, 255, 255);

// Color Variations Array
$prefix: color;
$color-list: (
	'gold' $prefix $gold,
	'purple' $prefix $purple,
	'blue' $prefix $blue,
	'lightblue' $prefix $lightblue,
	'green' $prefix $green,
	'red' $prefix $red,
	'white' $prefix $white
);


// ------------------------------
//  BUTTON MIXIN
// ------------------------------
@mixin button($button-color: $red, $button-type: '', $button-border: '', $button-size: '') {
	// Standard Button Styles
	@include border-radius(5px);
	@include transition(.3s ease-in-out);
	display: inline-block;
	border: 2px solid $button-color;
	padding: 10px 30px 8px;
	color: $button-color;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	// Button Hover Styles
	&:hover {
		border-color: $black;
		color: $black;
	}
	// Foreach Loop
	// Using the Color Variations in _variables.scss
	@each $i in $color-list {
		$alt-color: nth($i, 3);
		&.#{nth($i, 2)}-#{nth($i, 1)} {
			color: $alt-color;
			border-color: $alt-color;
			&:hover {
				border-color: $black;
				color: $black;
			}
		}
	}

	// Button Size (small or normal (or no value) )
	@if $button-size == small {
		@include font-size(13);
		padding: 6px 30px 3px;
	} @else {
		&.button-small {
			font-size: 13px;
			padding: 6px 30px 3px;
		}
	}

	// Button Fill
	// solid: color is the filled background color w/white text
	// normal or no value: color is the border & text color
	@if $button-type == solid {
		background: $button-color;
		color: $light;
		@if $button-color == $light {
			color: $dark !important;
		}
		&:hover {
			border-color: $dark;
			background: $dark;
			color: $light;
		}
	} @else {
		&.button-solid {
			background: $button-color;
			color: $white;
			@each $i in $color-list {
				$alt-color: nth($i, 3);
				&.#{nth($i, 2)}-#{nth($i, 1)} {
					background: $alt-color;
					@if $alt-color == $white {
						color: $black;
					}
				}
			}
			&:hover {
				border-color: $black;
				background: $black;
				color: $white;
			}
		}
	}

	// Button Border
	// bordered: border is white
	// normal or no value: border is colored
	@if $button-border == bordered {
		border-color: $white !important;
		&:hover {
			border-color: $black;
		}
	} @else {
		&.button-bordered { border-color: $white !important; }
	}
}

// Declare your default button
.button {
	@include button($red, normal, normal, normal);
}


// ------------------------------
//  Ignore The following
// ------------------------------
body {
  background: #333;
  font-family: helvetica, sans-serif;
  a {
    cursor: pointer;
  }
}