$button-border-color: #fff;
$button-background-color: #000;
$transition-time: 0.3s;
$rounded-button-border-radius: 10px;

@mixin border-radius($radius){
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	border-radius: $radius;
}

.framedButton {
	text-align: center;
	border: 3px solid $button-border-color;
	padding: 10px;
	width: 50%;
	transition: color $transition-time, background-color $transition-time, border-color $transition-time;
	color: $button-border-color;
	font-weight: bold;
}
.framedButton:hover{
	background-color: rgba(255,255,255, 0.3);
}


.roundedButton {
	@extend .framedButton;
	@include border-radius($rounded-button-border-radius);
}

.roundedButton:hover{
	@extend .framedButton:hover;
}

a a:hover a:active a:visited {
	color: $button-border-color; //Button with white border will have white text
	text-decoration: none;
}

$button-border-color: #fff;
$button-background-color: #000;
$transition-time: 0.3s;
$rounded-button-border-radius: 10px;

@mixin border-radius($radius){
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	border-radius: $radius;
}

.framedButton {
	text-align: center;
	border: 3px solid $button-border-color;
	padding: 10px;
	width: 50%;
	transition: color $transition-time, background-color $transition-time, border-color $transition-time;
	color: $button-border-color;
	font-weight: bold;
	text-decoration: none;
}
.framedButton:hover{
	background-color: rgba(255,255,255, 0.3);
}


.roundedButton {
	@extend .framedButton;
	@include border-radius($rounded-button-border-radius);
}

.roundedButton:hover{
	@extend .framedButton:hover;
}

a a:hover a:active a:visited {
	color: $button-border-color; //Button with white border will have white text
	text-decoration: none;
}

Remove text decorations in links and buttons
Remove text decorations in links and buttons