inspec/www/source/stylesheets/_buttons.scss

// Normal Links

a {
	@extend %transition;
	color: $color_purple;
	font-family: $main-font;
	font-weight: 600;
	text-decoration: underline;

	&:hover {
		color: $color_purple;
		opacity: 0.8;
	}
}

a.button, a.link {
	font-family: $main-font;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.a-purple {
	@extend %transition;
	cursor: pointer;
	text-decoration: none;

	&:hover {
		color: $color_purple;
	}
}

a.block {
	line-height: 2em;
}

// All CTA's

a.button {
	border-radius: 8px;
	line-height: 24px;
	text-decoration: none;
}

.btn-lg {
	@extend %transition;
	width: 250px;
	height: $percent_sm;
	line-height: $percent_sm;
	text-align: center;
}

.btn-sm {
	@extend %transition;
	width: 150px;
	height: $percent_sm;
	line-height: $percent_sm;
	text-align: center;
}

.btn-purple {
	background-color: $color-purple;
	color: white;

	&:hover {
		background-color: $color-purple;
		opacity: 0.8;
	}
}

.btn-purple-o {
	border: 1.5px solid $color-purple;
	color: $color-purple;
	background-color: transparent;

	&:hover {
		background-color: transparent;
		color: $color-purple;
		opacity: 0.8;
	}
}

.btn-white-o {
	border: 1.5px solid $color-white;
	color: $color-white;
	background-color: transparent;

	&:hover {
		background-color: transparent;
		color: $color-white;
		opacity: 0.8;
	}
}

.btn-slider {
	border-bottom: 1.5px solid white;
	margin-bottom: 0;
	border-radius: 8px 8px 0px 0px !important;
	background: -moz-linear-gradient(top, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.2),rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	&:hover, &:active, &.selected {
		background: $color_purple;
	}
}