//////pug
a(href="#").button.btn-hvr_right
  span.btn_text To Right

/////html
<a class="button btn-hvr_right" href="#">
  <span class="btn_text">To Right</span>
</a>

/////sass

$buttonBackgroundColor: #fff
$buttonPseudoBackgroundColor: #000
$buttonWidth: 200px
$buttonHeight: 45px
$buttonColor: #000
$buttonTransition: .25s ease
$buttonTextTransition: .5s ease


.button
	text-transform: uppercase
	display: inline-block
	text-align: center
	line-height: $buttonHeight
	width: $buttonWidth
	height: $buttonHeight
	border: 1px solid black
	position: relative
	background-color: $buttonBackgroundColor
	.btn_text
		color: $buttonColor
		transition: color $buttonTextTransition
.btn-hvr_right
	transition: background-color, border-color $buttonTransition
	&::before
		position: absolute
		content: ''
		background-color: #000
		width: 0
		height: 100%
		left: 0
		top: 0
		transition: width $buttonTransition
	&:hover
		border-color: #fff
		.btn_text
			color: white
			position: relative
		&::before
			width: 100%