#container
	%h1 CSS Gradient Button
	%h2 with animated background
	%a{:href => "https://codepen.io/ahenriksen"}
		%i.ion-social-codepen
		View more pens by Adam Henriksen
	#buttons
		%a{:href => "#", :class => "button"} Button
View Compiled
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:100,300,400);

@mixin hover-active() {
	&:hover,
	&:active {
		@content;
	}
}

body {
	background: #262628;
	font-family: "Fira Sans", sans-serif;
	font-size: 1rem;
	color: #fff;
}

h1 {
	font-weight: 300;
	font-size: 2rem;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}

h2 {
	font-weight: 300;
	color: hotpink;
	font-size: 1rem;
	margin: 8px 0px 24px 0px;
	letter-spacing: 1px;
}

a {
	color: #fff;
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 300;
	opacity: 0.7;
	transition: all 0.5s;
	
	@include hover-active() {
		opacity: 1;
		text-decoration: none;
	}
}

#container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	
	#buttons {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 64px;
		margin-bottom: 32px;
		
		.button {
			background-image: linear-gradient(to right,#f05a28,#ec008c,#f05a28);
			background-size: 300% 100%;
			transition: all 0.5s ease-in-out;
			text-transform: uppercase;
			display: inline-block;
			font-size: 1rem;
			opacity: 1;
			padding: 16px 32px;
			font-weight: 700;
			line-height: 1.1;
			white-space: nowrap;
			border-radius: 3px;
			color: #fff;
			text-align: center;
			text-decoration: none;
			letter-spacing: 2px;
			
			@include hover-active() {
				background-position: -50% 0;
			}
		}
	}
}
View Compiled
// Nope!

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.