JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<span id="nl-form-button-submit" class="viewmap viewall white">
    <a href="#">
        <span>Submit</span>
        <span>this form</span>
    </a>
</span>

CSS

body {background:#000;}

/* ----- animated button ----- */
.viewall { margin-top:25px; text-align:center; clear:both; }
.viewall a { position: relative; display: inline-block; margin: 0 10px; padding: 18px 20px; outline: none; color: #3b414f; text-decoration: none; text-transform: uppercase; }
.viewall a:hover,
.viewall a:focus { outline: none; }
.viewall a::before,
.viewall a::after { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #3b414f; content: ''; opacity: 0.2; transition: opacity 0.3s, height 0.3s; }
.viewall a::after { top: 100%; opacity: 0; transition: transform 0.3s, opacity 0.3s;	transform: translateY(-10px); -webkit-transform: -webkit-translateY(-10px); }
.viewall a span:first-child { z-index: 2; display: block; font-size: 24px; font-family: 'nevis-bold', sans-serif; }
.viewall a span:last-child { z-index: 1; display: block; padding: 8px 0 0 0; text-transform: none; font-style: italic; font-size: 16px; font-family: "kepler-std-display",serif; opacity: 0; transition: all 0.3s; transform: translateY(-100%); -webkit-transform:-webkit-translateY(-100%); }
.viewall a:hover::before,
.viewall a:focus::before { height: 6px; }
.viewall a:hover::before,
.viewall a:hover::after,
.viewall a:focus::before,
.viewall a:focus::after { opacity: 1; transform: translateY(0px); -webkit-transform: -webkit-translateY(0px); }
.viewall a:hover span:last-child,
.viewall a:focus span:last-child { opacity: 1; transform: translateY(0%); -webkit-transform: -webkit-translateY(0%); }
.viewall.white a { color: #fff; }
.viewall.white a::before, 
.viewall.white a::after { background: #fff; }