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;
}
.kanan {
background: #21bbb8;
color: #eee;
display: block;
font-size: 17px;
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: #21bbb8;
color: #eee;
display: block;
font-size: 17px;
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:0 0 15px;
}
.bnbutton:hover .kiri {
transform: translate(-200px,0);
transition: all .20s ease;
}
.bnbutton:hover .kanan {
transform: translate(200px,-50px);
transition: all .20s ease;
}