JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.DeptButton {
display: inline-block;
border-radius: 4px;
background-color: #f7f7f7;
border: none;
text-decoration: none;
text-align: center;
font-size: 22px;
padding: 10px 40px 0px 0px;
width: 285px;
transition: all 0.5s;
cursor: pointer;
margin: 15px;
}
.DeptButton span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.DeptButton span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 25px;
right: -55px;
transition: 0.5s;
}
.DeptButton:hover span {
padding-right: 40px;
}
.DeptButton:hover span:after {
opacity: 1;
right: -22px;
}
.DeptButton:hover {
background-color: #f7f7f7;
box-shadow: 0px 0px 20px 0 rgba(0,0,0,0.19);
}
.DeptButton a:link, a:visited, a:hover, a:active {
text-decoration: none;
display: inline-block;
font-weight: normal;
}
</style>
</head>
<!-- HTML Button Section -->
<button id="CLPButton" class="DeptButton">
<span>
<table style="width:120%">
<tr>
<th><img src="http://i.imgur.com/vjrbizL.png"></th>
<th>Clinical Lab <br> Platforms</th>
</tr>
</table>
</span>
</button>