JSFiddle - React, Tailwind, and code Playground

by schtroumpheh

HTML

<p class="bouton">
<a>Texte du bouton</a>
</p>

CSS

.bouton a {
	padding:5px 16px;
	border:#000 1px solid;
	background:
		linear-gradient(90deg, rgba(255,255,0,1) 21%, rgba(255,255,0,1) 53%, rgba(255,255,0,1) 100%),
		linear-gradient(90deg, rgba(255,0,0,1) 21%, rgba(255,0,0,1) 53%, rgba(255,0,0,1) 100%)
;
	background-size: 100% 100%, 0 0;
	background-repeat: no-repeat, no-repeat;
	background-color:#ff0;
	
	transition-duration:1s;
	transition-property: background-size;
}

.bouton a:hover {
	background-size: 0 0, 100% 100%;
	
	transition-duration:1s;
	transition-property: background-size;
}