JSFiddle - React, Tailwind, and code Playground

HTML

<button class="flip hover green">
    <div class="btn-container">
        <div>Log in</div>
        <div>Loading...</div>
    </div>
</button>
Hello

CSS

input:focus, select:focus, textarea:focus, button:focus {
    outline: none;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button.flip {
    padding: 4px;
    width: 100%;
    background: transparent;
    border: none;
}

button.flip > .btn-container {
    width: 100%;
    height: 34px;
    margin-top: 16px;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    text-align: center;
    cursor: pointer;
}

button.flip.focus:focus > .btn-container, button.flip.hover:hover > .btn-container, button.flip.flipped > .btn-container {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
}

button.flip > .btn-container > div {
    height: 34px;
    border-radius: 2px;
    background: rgba(15, 157, 88, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2), 0 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 8px;
    font-size: 120%;
    color: #FFF;
    -webkit-transition: background 250ms ease;
    -moz-transition: background 250ms ease;
    -o-transition: background 250ms ease;
    transition: background 250ms ease;
}

button.flip > .btn-container > div:nth-child(1) {
    -webkit-transform: translateZ(17px);
    -moz-transform: translateZ(17px);
    -o-transform: translateZ(17px);
    -ms-transform: translateZ(17px);
    transform: translateZ(17px);
}

button.flip > .btn-container > div:nth-child(2) {
    -webkit-transform: rotateX(-90deg) translateZ(-17px);
    -moz-transform: rotateX(-90deg) translateZ(-17px);
    -o-transform: rotateX(-90deg) translateZ(-17px);
    -ms-transform: rotateX(-90deg) translateZ(-17px);
    transform: rotateX(-90deg)...