JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contact-right">
<span>Contact me</span>
</div>

CSS

.contact-right span{
    background-color: #fff;
    color: #f87f73;
    padding: 0px 25px;
    border: 5px solid #f87f73;
	display: block;
    background-image: linear-gradient(to left,
                                      transparent,
                                      transparent 50%,
                                      #00c6ff 50%,
                                      #00c6ff);
    background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
    
}

.contact-right span:hover{
background-position: 0 0;
    background-color: #f87f73;
    color: #fff;
    -webkit-transition: all .35s ease;
    -o-transition: all .35s ease;
    transition: all .35s ease;
}