JSFiddle - React, Tailwind, and code Playground
HTML
<a class="button" href="">
<div class="center">
<img src="http://dummyimage.com/30x30/cf97cf/fff">
<div class="btnText">
Button
<span>Button alt</span>
</div>
</div>
</a>
CSS
body {
padding: 20px;
}
.button {
background: #000;
color: #fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 120px;
padding: 30px 50px;
display: inline-block;
}
span {
font-size: 11px;
color: #ccc;;
display: block;
}
img {
vertical-align: middle;
display: inline-block;
}
.center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.btnText {
vertical-align: middle;
display: inline-block;
}