JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slidebtn">
        <div class="icon">
           <div class="text"><p>I'm Aviable</p></div>
        </div>
        
    </div>

CSS

.slidebtn{
        width:140px;
        margin:auto;
        overflow:hidden;
        height:auto;
        position:relative;
    
    }
    .text{
       position:absolute;
        width:100px;
        float:Left;
        margin-left:150px;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
       z-index:-1;
    }
    .icon{
        background-image:url('http://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/png/24x24/001_01.png');
        width:24px;
        height:24px;
        float:right;
        background-repeat: no-repeat;
        background-position: right;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;

    }
    .icon:hover{
        width:120px;
    }
    .icon:hover .text{
        margin-left:0px;
        background:green;
        -webkiborder-border-radius: 25px;
        -moz-
    }

JavaScript

$('.icon1').hover(function(){
        $('.text').animate({"marginLeft":"20"},500);
    },function(){
        $('.text').animate({"marginLeft":"150"},500);
    });