JSFiddle - React, Tailwind, and code Playground

by CarambaMoreno

HTML

<div class="">
    <div class=""> 
    <a href="#" class="btn button thar-one">Sign up</a> 
    <input type="button" value="Enviar" class="btn button thar-one" />
    </div>
</div>

CSS

.btn{ height: 15vh; width: 20vw;
  text-align: center; vertical-align: center; background: transparent;
}
/* Thar Buttons */



.button.thar-one {
	cursor: pointer;
  display: block;
  position: relative;
	border: 2px solid #F7CA18;
	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.button.thar-one:hover {
	color: #000 !important;
	background-color: transparent;
	text-shadow: none;
}
.button.thar-one:hover:before {
	bottom: 0%;
	top: auto;
	height: 100%;
}
.button.thar-one:before {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 0px;
	width: 100%;
	z-index: -1;
	content: '';
	color: #000 !important;
	background: #F7CA18;
	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}