JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<button id="btnTest" class="btn btn-primary">
    <span class="fa fa-certificate"></span>
    &nbsp;
    Test
    <span class="btn-overlay">
        <i class="fa fa-refresh fa-spin"></i>
    </span>
</button>

CSS

.btn {
  position: relative;
}
.btn-overlay {
    position: absolute;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0.5;
    transition: opacity .5s;
}