JSFiddle - React, Tailwind, and code Playground

HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    
    <button><i class="fa fa-check"></i> TEKST</button>

CSS

button {
    border: 1px solid #000;
    background: 0;
    background-color: #fff;
    font-size: 16px;
    width: 300px;
    font-family: Times Roman;
    text-align: left;
    padding: 0.3em 2.5em 0.63em 1em;
    position: relative;
    transition: all 0.6s ease;    
    overflow: hidden;
}

button:after {
    content: "\f061";;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    right: 0.3em;
    top: -2.5em;
    transition: all 0.6s ease;    
}

button:before {
    content: "";
    position: absolute;
    height: 0.33em;
    background-color: blue;
    left: 0;
    width: 0;
    bottom: 0;
    transition: all 1s ease; 
}

button:hover:after {
    top: 0.28em;
}

button:hover:before {
    width: 300px;
}