//- arrays
- var btnTypes = {'border-o':'Border - Open','border':'Border','border-rev-o':'Border Reversed - Open','border-rev':'Border Reversed','fill-vert-o':'Fill Vertical - Open','fill-vert':'Fill Vertical','fill-horz-o':'Fill Horizontal - Open','fill-horz':'Fill Horizontal'}
- var btnColors = {'green':'Emerald','blue':'Peter River','purple':'Amethyst','navy':'Wet Asphalt','orange':'Carrot','red':'Alizarin'}

.main-container
	h1 Colorful CSS Buttons
	each name,type in btnTypes
		section
			h2= name
			each text,color in btnColors
				button(class="btn btn-"+color+" btn-"+type)= text
View Compiled
/* Reset */
@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);

// colors
$color-one: #2c3e50;
$btn-colors: (
	"green": "#2ecc71",
	"blue": "#3498db",
	"purple": "#9b59b6",
	"navy": "#34495e",
	"orange": "#e67e22",
	"red": "#e74c3c"
);

// extenders
.animate {
	transition: all 0.3s;
}

/* Main Styles */
.main-container {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	padding: 0 15px;
}

h1 {
	line-height: 1;
	padding: 25px 0;
	border-bottom: 1px solid $color-one;
	font-size: 35px;
	color: $color-one;
	text-align: center;
}

section {
	padding: 60px 0 61px;
	text-align: center;
	position: relative;
	
	h2 {
		margin-bottom: 15px;
		font-weight: normal;
		font-size: 17px;
		color: #D2D2D2;
		text-align: center;
	}
	
	&:not(:last-child):after {
		content: '';
		width: 70%;
		height: 1px;
		border-bottom: 1px dashed $color-one;
		opacity: .5;
		position: absolute;
		bottom: -1px;
		left: 15%;
	}
}

.btn {
	display: inline-block;
	line-height: 35px;
	margin: 8px;
	padding: 0 15px;
	font-size: 15px;
	position: relative;
	opacity: .999;
	border-radius: 3px;
	@extend .animate;
}

.btn-border-o {
	background-color: transparent;
	border: 1px solid #d0d0d0;
	color: #B8B8B8;
	
	&:before,
	&:after {
		content: '';
		border-style: solid;
		position: absolute;
		z-index: 5;
		border-radius: 3px;
		box-sizing: content-box;
		@extend .animate;
	}
	
	&:before {
		width: 0;
		height: 100%;
		border-width: 1px 0 1px 0;
		top: -1px;
		left: 0;
		transition-delay: 0.05s;
	}
	
	&:after {
		width: 100%;
		height: 0;
		border-width: 0 1px 0 1px;
		top: 0;
		left: -1px;
	}
	
	&:hover {
		
		&:before {
			width: 100%;
		}
		
		&:after {
			height: 100%;
		}
	}
	
	@each $name,$hex in $btn-colors {
		
		&.btn-#{$name} {
			
			&:before,
			&:after {
				border-color: #{$hex};
			}
			
			&:hover {
				color: #{$hex};
			}
		}
	}
}

.btn-border {
	background-color: #e5e5e5;
	border: 1px solid #e5e5e5;
	color: #a6a6a6;
	
	&:before,
	&:after {
		content: '';
		border-style: solid;
		position: absolute;
		z-index: 5;
		border-radius: 3px;
		box-sizing: content-box;
		@extend .animate;
	}
	
	&:before {
		width: 0;
		height: 100%;
		border-width: 1px 0 1px 0;
		top: -1px;
		left: 0;
		transition-delay: 0.05s;
	}
	
	&:after {
		width: 100%;
		height: 0;
		border-width: 0 1px 0 1px;
		top: 0;
		left: -1px;
	}
	
	&:hover {
		background-color: transparent;
		
		&:before {
			width: 100%;
		}
		
		&:after {
			height: 100%;
		}
	}
	
	@each $name,$hex in $btn-colors {
		
		&.btn-#{$name} {
			
			&:before,
			&:after {
				border-color: #{$hex};
			}
			
			&:hover {
				color: #{$hex};
			}
		}
	}
}

.btn-border-rev-o {
	background-color: transparent;
	border: 1px solid #d0d0d0;
	color: #B8B8B8;
	
	&:before,
	&:after {
		content: '';
		border-style: solid;
		position: absolute;
		z-index: 5;
		border-radius: 3px;
		box-sizing: content-box;
		@extend .animate;
	}
	
	&:before {
		width: 0;
		height: 100%;
		border-width: 1px 0 1px 0;
		top: -1px;
		right: 0;
		transition-delay: 0.05s;
	}
	
	&:after {
		width: 100%;
		height: 0;
		border-width: 0 1px 0 1px;
		bottom: 0;
		left: -1px;
	}
	
	&:hover {
		
		&:before {
			width: 100%;
		}
		
		&:after {
			height: 100%;
		}
	}
	
	@each $name,$hex in $btn-colors {
		
		&.btn-#{$name} {
			
			&:before,
			&:after {
				border-color: #{$hex};
			}
			
			&:hover {
				color: #{$hex};
			}
		}
	}
}

.btn-border-rev {
	background-color: #e5e5e5;
	border: 1px solid #e5e5e5;
	color: #a6a6a6;
	
	&:before,
	&:after {
		content: '';
		border-style: solid;
		position: absolute;
		z-index: 5;
		border-radius: 3px;
		box-sizing: content-box;
		@extend .animate;
	}
	
	&:before {
		width: 0;
		height: 100%;
		border-width: 1px 0 1px 0;
		top: -1px;
		right: 0;
	}
	
	&:after {
		width: 100%;
		height: 0;
		border-width: 0 1px 0 1px;
		bottom: 0;
		left: -1px;
		transition-delay: 0.05s;
	}
	
	&:hover {
		background-color: transparent;
		
		&:before {
			width: 100%;
		}
		
		&:after {
			height: 100%;
		}
	}
	
	@each $name,$hex in $btn-colors {
		
		&.btn-#{$name} {
			
			&:before,
			&:after {
				border-color: #{$hex};
			}
			
			&:hover {
				color: #{$hex};
			}
		}
	}
}

.btn-fill-vert-o {
	background-color: transparent;
	border: 1px solid #d0d0d0;
	color: #B8B8B8;
	overflow: hidden;
	
	&:before,
	&:after {
		content: '';
		width: 100%;
		height: 0;
		opacity: 0;
		position: absolute;
		left: 0;
		z-index: -1;
		@extend .animate;
	}
	
	&:before {
		top: 50%;
	}
	
	&:after {
		bottom: 50%;
	}
	
	&:hover {
		color: #fff;
		
		&:before,
		&:after {
			height: 50%;
			opacity: 1;
		}
	}
	
	@each $name,$hex in $btn-colors {
		
		&.btn-#{$name} {
			
			&:before,
			&:after {
				background-color: #{$hex};
			}
			
			&:hover {
				border-color: #{$hex};
			}
		}
	}
}

.btn-fill-vert {
	background-color: #e5e5e5;
	border: 1px solid #e5e5e5;
	color: #a6a6a6;
	overflow: hidden;
	
	&:before,
	&:after {
		content: '';
		width: 100%;
		height: 0;
		opacity: 0;
		position: absolute;
		left: 0;
		z-index: -1;
		@extend .animate;
	}
	
	&:before {
		top: 50%;
	}
	
	&:after {
		bottom: 50%;
	}
	
	&:hover {
		color: #fff;
		
		&:before,
		&:after {
			height: 50%;
			opacity: 1;
		}
	}
	
	@each $name,$hex in $btn-colors {
		
		&.btn-#{$name} {
			
			&:before,
			&:after {
				background-color: #{$hex};
			}
			
			&:hover {
				border-color: #{$hex};
			}
		}
	}
}

.btn-fill-horz-o {
	background-color: transparent;
	border: 1px solid #d0d0d0;
	color: #B8B8B8;
	overflow: hidden;
	
	&:before,
	&:after {
		content: '';
		width: 0;
		height: 100%;
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: -1;
		@extend .animate;
	}
	
	&:before {
		left: 50%;
	}
	
	&:after {
		right: 50%;
	}
	
	&:hover {
		color: #fff;
		
		&:before,
		&:after {
			width: 50%;
			opacity: 1;
		}
	}
	
	@each $name,$hex in $btn-colors {
		
		&.btn-#{$name} {
			
			&:before,
			&:after {
				background-color: #{$hex};
			}
			
			&:hover {
				border-color: #{$hex};
			}
		}
	}
}

.btn-fill-horz {
	background-color: #e5e5e5;
	border: 1px solid #e5e5e5;
	color: #a6a6a6;
	overflow: hidden;
	
	&:before,
	&:after {
		content: '';
		width: 0;
		height: 100%;
		opacity: 0;
		position: absolute;
		top: 0;
		z-index: -1;
		@extend .animate;
	}
	
	&:before {
		left: 50%;
	}
	
	&:after {
		right: 50%;
	}
	
	&:hover {
		color: #fff;
		
		&:before,
		&:after {
			width: 50%;
			opacity: 1;
		}
	}
	
	@each $name,$hex in $btn-colors {
		
		&.btn-#{$name} {
			
			&:before,
			&:after {
				background-color: #{$hex};
			}
			
			&:hover {
				border-color: #{$hex};
			}
		}
	}
}
View Compiled
// Not a damn thing
Run Pen

External CSS

  1. //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js