JSFiddle - React, Tailwind, and code Playground

by gravof

HTML

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<nav>
    <a href="#" class="button about"><span class="button-content"><span class="button-extra">Know More</span> About Me</span></a>
<a href="#" class="button"><span class="button-content"><span class="button-extra">Checkout My</span> Work</span></a>
<a href="#" class="button"><span class="button-content"><span class="button-extra">Read My</span> Blog</span></a>
<a href="#" class="button"><span class="button-content"><span class="button-extra">Keep in</span> Contact</span></a>
</nav>
<button>Animate</button>

SCSS

body {
    background: #f1f1f1;
}
nav {
    width: 300px;
    margin: 20px auto;
    position: relative;
    
    .button {
        display: block;
        text-align: center;
        padding: 15px 0;
        text-decoration: none;
        color: #000;
        background: -webkit-linear-gradient(#fff 0%, #f7f7f7 100%);
        border-radius: 3px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 1px;
        font-size: 18px;
        text-transform: uppercase;
    }
    .button-extra {
        font-size: 12px;
        display: block;
        color: #b9b9b9;
        text-transform: lowercase;
    }
}

JavaScript

$('button').click(function() {
    //$('.button-extra').animate({'font-size': 'hide'});
    //$('.button').animate({'font-size': 12});
   
    var $buttons = $('.button');
    var len = $buttons.length;
    var width = $buttons.width();
    var singleWidth = width / len;
    var tops = [];
    $buttons.each(function(i, button) {
        tops.push($(button).position().top);
    }).each(function(i, button) {
        var $button = $(button);
        $button.css({
            'position': 'absolute'
            , 'top': tops[i]
            , 'width': '100%'
            , 'margin': 0
        });
    }).each(function(i, button) {
        var $button = $(button);
        $button.animate({
            'top': 0
            , 'left': singleWidth * i
            , 'width': singleWidth
            , 'font-size': 12
            , 'padding-top': 10
            , 'padding-bottom': 10
        }).find('.button-extra').animate({'font-size': 0});
    });
    
});