JSFiddle - React, Tailwind, and code Playground

by Rishad Harisdias

HTML

<div class="bnbutton">
      <a href="#">Download</a>
      <span class='kiri'>30MB</span>
    </div>

CSS

.bnbutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
}

.bnbutton a {
    background: #31ace8;
    color: #eee;
    display: block;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Arial',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 5;
    transition:all .5s ease;
}
.kiri {
background: #333;
color: #eee;
display: block;
font-size: 13px;
border-radius: 0 0 10px 10px;
font-weight: 700;
transition: all .20s ease;
text-align: center;
font-family: 'Arial',Verdana,sans-serif;
height: 50px;
line-height: 50px;
text-decoration: none;
text-transform: uppercase;
width: 200px;
position: relative;
z-index: 2;
margin-top:-50px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
     0%   {margin-top:-300%;opacity:0;}
    50%  {margin-top:-30px;opacity:1;}
    75% {margin-top:-70px;opacity:1;}
    100% {margin-top:-50px;opacity:1;}
}

/* Standard syntax */
@keyframes myfirst {
   0%   {margin-top:-300%;opacity:0;}
    50%  {margin-top:-30px;opacity:1;}
    75% {margin-top:-70px;opacity:1;}
    100% {margin-top:-50px;opacity:1;}
}
.bnbutton a:hover {
	box-shadow: inset 200px 0px 0px #21bbb8;
    transition:all .50s ease;
}
.bnbutton:hover .kiri {
transform: translate(0,50px);
transition: all .20s ease;
 -webkit-animation: myfirst .8s; /* Chrome, Safari, Opera */
    animation: myfirst .8s;
}