JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<body>
<button class="btn">Show More</button>
</body>

CSS

body {
     width: 150px;
    margin: auto;
    margin-top: 100px;
    background-color: #003;
}
button {
    padding: 5px 0;
    background-color: #09F;
    font-size: 16px;
    border-radius: 35px;
    color: #FFF;
    width: 150px;
    margin: auto;
    border: 1px solid #09F;
    position:relative;
    
}



button:hover:after {
    background: none repeat scroll 0 0 transparent;
    border-right: 2px solid #09f;
    border-top: 2px solid #09f;
    content: "";
    height: 10px;
    opacity: 1;
    position: absolute;
    right: 20px;
    top: 10px;
    transform: rotate(45deg);
    width: 10px;
}

JavaScript

$(document).ready(function () {
    $("button").mouseover(function () {
        $(this).css({
            background: 'transparent',
            color: '#09F'
        });
        $("button").stop().animate({
            width: "110%",
        }, 900);
        $(this).text("Show More");
    });

    $("button").mouseout(function () {
        $(this).css({
            background: '#09F',
            color: '#FFF'
        });
        $("button").stop().animate({
            width: "100%",
        }, 900);
        $(this).text("Show More");
    });

});