JSFiddle - React, Tailwind, and code Playground

by CarambaMoreno

HTML

<input type="submit" value="Enviar" class="btn wpcf7-form-control wpcf7-submit button">

CSS

.animated-button {
	cursor: pointer;
  display: block;
  position: relative;
	border: 2px solid #F7CA18;
	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.animated-button:hover {
	color: #000 !important;
	background-color: transparent;
	text-shadow: none;
}
.animated-button:hover:before {
	bottom: 0%;
	top: auto;
	height: 100%;
}
.animated-button: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;
}

JavaScript

$( ".wpcf7-submit.button" ).wrap( "<div class='animated-button'></div>" );