<div class="moer_btn">
<a href="https://">
<span>ボタン</span>
</a>
</div>

a {
margin: 0;
color: inherit;
padding: 0;
font-size: 100%;
text-decoration: none;
vertical-align: baseline;
background: transparent;
}
.moer_btn {
max-width: 200px;
width: 108%;
}
.moer_btn a {
position: relative;
display: block;
}
.moer_btn a::after {
content: "";
display: block;
border-radius: 5px;
background: #93a797;
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 20px;
}
.moer_btn a span {
background: #324b38;
color: #fff;
letter-spacing: 4px;
padding: 15px 10px;
text-align: center;
min-width: 150px;
display: block;
border-radius: 5px;
position: relative;
z-index: 1;
line-height: 1;
transition: all .3s;
}
.moer_btn a:hover span {
transform: translateY(5px);
}