JSFiddle - React, Tailwind, and code Playground

by Mehmet Demiray

HTML

<script src="&lt;link href=&quot;//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt;"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<div id="menu-container">
   <div class="s-buton fbk-buton">
       <span>
           <i class="fa fa-facebook"></i>
            <br>
           <i class="fa fa-facebook"></i>
       </span>
    </div>
   <div class="s-buton twt-buton">
       <span>
           <i class="fa fa-twitter"></i>
               <br>
            <i class="fa fa-twitter"></i>
       </span>
    </div>
    <div class="s-buton gp-buton">
       <span>
           <i class="fa fa-google-plus"></i>
               <br>
            <i class="fa fa-google-plus"></i>
       </span>
    </div>
</div>

CSS

#menu-container .s-buton{
    height: 50px;
    width: 50px;
    border:1px solid #999;
    background: rgba(0,0,0,0.4);
    color:#ccc;
    left: 0;
    text-align: center;
    overflow: hidden;
    margin: 5px;
    -webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}

#menu-container div span{
    display: block;
    line-height: 50px;
    font-size: 24px;
    padding: auto;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#menu-container div:hover span{
    color: #fff;
    background: #FF0000;
    height: 300px;
    margin: -50px 0 5px 0;
    padding: -5px 0 0 0;
}