JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<div class="wrapper">
    <a href="#" class="boost">Boost</a>
    <a href="#" class="collect">Collect</a>
    <a href="#" class="share">Share</a>
</div>

CSS

.wrapper{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
}
.wrapper:hover{
    zoom: 1.1; /* all browsers */
    -moz-transform: scale(1.1);  /* Firefox */
}
.boost,
.collect,
.share{
    display:inline-block;
    width: 100px;
    height: 50px;
    line-height:70px;
    text-align:center;
    border-radius: 50% / 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size:100%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    text-decoration:none;
    color:#fff;
    vertical-align: bottom;
}
.boost{background:orange;}
.collect{background:green;}
.share{background:pink;}

.boost:hover,
.collect:hover,
.share:hover,
{
    background: #fff;
    zoom: 1.1; /* all browsers */
    -moz-transform: scale(1.1);  /* Firefox */
    border:1px solid black;
    z-index:999999;
}
.share:hover{color:pink;}
.boost:hover{color:orange;}
.collect:hover{color:green;}