I made the following CSS class:
.mine-button { outline: 0; background-color:rgb(153,153,153); margin: 0 4px 100px 0; padding: 0 1em; color:rgb(255,255,0); height: 2em; text-decoration: none !important; cursor: pointer; position: relative; text-align: center; vertical-align:middle; -moz-border-radius: 15px; -webkit-border-radius: 15px; float:right; }
Then I added the following to the HTML file:
<a class='mine-button'>Read more</a>
but this is what I get:
There's 2 problems:
1. The "Read me" is not aligned vertically in the middle of the "button"
2. The "button" is over the yellow border of the text although the margin-bottom in the class above is set to 100px !
a
element is rendered as an inline-block, which means that it will collapse around it's contents. Try using adiv
around your link. Please add the complete html and css for this block.appearance:button;
...