centering text on circle button
If you add another element to your markup you can centre using a combination of relative positions and transform
.btn-donate {
background: #97c83e;
text-align: center;
width: 149px;
height: 148px;
border-radius: 100%;
display: inline-block;
font-size: 35px;
vertical-align: middle;
color: white;
font-weight: bold;
text-decoration: none
}
.wrapper {
display: block;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<a href="" class="btn btn-donate">
<span class="wrapper">Donate <span>Us</span></span>
</a>Use inline-blocks to line them up vertically instead of using line-height like here.
I have moved the full text inside the span in the markup
snippet below:
.btn-donate {
background: #97c83e;
text-align: center;
width: 149px;
height: 148px;
border-radius: 100%;
display: inline-block;
font-size: 35px;
vertical-align: middle;
color: white;
font-weight: bold;
text-decoration: none
}
a.btn.btn-donate span {
display: inline-block;
vertical-align: middle;
}
a.btn.btn-donate:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}<a href="" class="btn btn-donate"><span>Donate Us</span></a>Flexbox can do that:
.btn-donate {
background: #97c83e;
text-align: center;
width: 149px;
height: 149px;
border-radius: 100%;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 35px;
color: white;
font-weight: bold;
text-decoration: none
}<a href="" class="btn btn-donate">Donate <span>Here</span></a>