@mixin button_base() {
	position: relative;
	display: inline-block;
	font-size: 11px;
	line-height: 18px;
	text-decoration: none;
	padding: 4px 22px;
	color: $dark_color;
	text-transform: uppercase;
	border-radius: $border_radius_small;
	border-width: 1px;
	border-style: solid;
	outline: none;
	cursor: pointer;
	transition: all 200ms linear;

	&:before {
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: $border_radius_small;
		background-image: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
		content: '';
	}

	&:hover {
		&:before {
			background-image: linear-gradient(0deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
		}
	}

	&:active {
		&:before {
			opacity: 0;
		}
	}
}