JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bnbutton">
      <a href="#">Download</a>
      <span class='kanan'>DROPBOX</span>
      <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;
}
.kanan {
background: #333;
color: #eee;
display: block;
font-size: 13px;
border-radius: 0 10px 10px 0;
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;
transform: translate(0,-50px);
}
.kiri {
background: #333;
color: #eee;
display: block;
font-size: 13px;
border-radius: 10px 0 0 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:-100px;
}
.bnbutton a:hover {
	box-shadow: inset 200px 0px 0px #21bbb8;
    transition:all .50s ease;
}
.bnbutton:hover .kiri {
transform: translate(-200px,0);
transition: all .20s ease;
}
.bnbutton:hover .kanan {
transform: translate(200px,-50px);
transition: all .20s ease;
}