JSFiddle - React, Tailwind, and code Playground

by Jonathan Sampson

HTML

<div id="button1">
    <a href="#" data-text="Search Now!"></a>
</div>

CSS

a {
    position: relative;
    perspective: 500px;
}

a, a::before, a::after {
    color: #FFF;
    display: inline-block;
    line-height: 44px;
    box-sizing: border-box;
    width: 155px; height: 44px;
    backface-visibility: hidden;
    text-decoration: none;
    text-align: center;
}

a::before, a::after {
    top: 0; left: 0;
    position: absolute;
    content: attr(data-text);
    transition: transform 1s;
}

a::before {
    background: #0965A0;
    transform-origin: 50% 100%;
}

a::after {
    background: #2195DE;
    transform-origin: 50% 0%;
    transform: translateY(100%) rotateX(-90deg);
}

a:hover::before {
    transform: translateY(-100%) rotateX(90deg);
}

a::before, a:hover::after {
    transform: translateY(0) rotateX(0);
}