JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="button">
    Button text button text buttontext
</a>
<a href="#" class="button">
    Button text
</a>
<a href="#" class="button">
    Button text button text buttontext Button text button text buttontext
</a>

CSS

.button {
    display:inline-block;
    max-width: 50px;
    position: relative;
    padding-top: 30px;
    text-align: center;
    vertical-align: top;
    margin: 0 10px;
}

.button:before, .button:after {
    content: "";
    border-radius: 100%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;  
    margin: 0 auto;    
}

.button:before {
    background: pink;
    z-index: 1;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.button:after {
    background: aqua;
    z-index: 0;
}

.button:hover:before {
    opacity:0;
}