////pug
		.hover_toBottom-btn
			a(href="#").button.btn-hvr_bot
				span.btn_text hover me

////html

<div class="hover_toBottom-btn">
	<a class="button btn-hvr_bot" href="#">
		<span class="btn_text">hover me</span>
	</a>
</div>

/////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_bot
	transition: background-color, border-color $buttonTransition
	&::before
		position: absolute
		content: ''
		background-color: #000
		width: 100%
		height: 0
		left: 0
		top: 0
		transition: height $buttonTransition
	&:hover
		border-color: #fff
		.btn_text
			color: white
			position: relative
		&::before
			height: 100%