inspec/www/source/stylesheets/_buttons.scss

// Normal Links

a {
	@extend       %transition;
	color       : $color_link;
	font-family : $heading-font;
}

// All CTA's

.btn {
	@extend               %transition;
	box-sizing          : border-box;
	padding             : 0.6rem 1.25rem;
	color               : $color_purple;
	border              : 1px solid transparent;
	border-right        : 1px solid $color_link;
	border-left         : 1px solid $color_purple;
	border-radius       : 4px;
	background          : transparent;
	background-image    : linear-gradient(
	                      	to right,
	                      	$color_purple 0,
	                      	$color_link 100%
	                      ),
	                      linear-gradient(
	                      	to right,
	                      	$color_purple 0,
	                      	$color_link 100%
	                      );
	background-repeat   : no-repeat;
	background-position : 0 0,
	                      0 100%;
	background-size     : 100% 1px;

	&:hover {
		color            : $color_white;
		border-color     : $color_purple;
		background-image : initial;
		background-color : $color_purple;
	}

	&.btn-inverse {
		color : $color_purple;

		&:hover {
			color            : $color_white;
			background-color : $color_purple;
		}
	}
	//mobile
	@media only screen and (max-width: 40.063em) {
	float: initial;
	padding     : 0.8rem 1.6rem;
	margin     : 0 auto;
	text-align : center;
	}
}

// Form Buttons

button {
	@extend         %transition;
	padding       : 0.6rem 1.25rem;
	color         : $color_white;
	border        : 2px $color-purple;
	border-radius : 4px;
	background    : $color_purple;
}

button:hover {
	opacity : 0.8;
}