Button's text vertical align
You can use line-height
to achieve your goal.
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 150px;
overflow: visible;
}
http://jsfiddle.net/kA8pp/2/
You can use flexbox (check browser support, depending on your needs).
button {
display: inline-flex;
align-items: flex-end;
}
Try padding-top:65px;
in button class
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
padding-top:65px;
}
JS Fiddle Demo