JSFiddle - React, Tailwind, and code Playground

by TeslaNick

HTML

<div>
    
<a class="load-more" href="#" onclick="this.className += ' loading' ">
    <span class="message message-left"><i>Load</i></span>
    <span class="message message-right"><i>More</i></span>
</a>
    
</div>

SCSS

.load-more {
    position: absolute;
    diplay: block;
    margin: 100px 0;
    width: 100%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    
    min-height: 32px;
    
    .message {
        height: 20px;
        line-height: 20px;
        font-size: 13px;
        position: absolute;
        top: 6px;
        -webkit-transition: width 0.5s ease;
        overflow: hidden;        
        background: #4F96C4;
        color: #fff;
        border-radius: 100px;
        width: 0;
    
        i {
            position: absolute;
            font-style: normal;
            display: block;
            padding: 0 10px;
        }
    }

    .message-left {
        i {
            left: 5px;
            padding-right: 25px;
        }
        text-align: center;
        right: 50%;
    }

    .message-right {
        i {
            right: 5px;
            padding-left: 25px;
        }
        text-align: center;
        left: 50%;
    }
    
    
    &:after {
        display: block;
        content: "+";
        border-radius: 100px;
        background: #4F96C4;
        line-height: 23px;
        color:#fff;        
        width: 32px;
        height: 32px;
        font-size: 30px;
        text-align: center; 
        position: absolute;
        top: -1px;
        left: 50%;
        margin-left: -15px;
        border: 2px solid white;
    
        box-shadow: 0 1px 1px rgba(0,0,0,0.25);
    }
    
    &:hover {
        .message {
            width: 70px;
        }
    }

    &.loading:after {
        content: "";
        background: #4F96C4 url(http://ajaxload.info/cache/4F/96/C4/FF/FF/FF/21-0.gif) -1px 0px no-repeat;
    }
}