HTML Button Image Cut Off - html

Question

I'm trying to make a simple button in HTML using an image and basic CSS styling.
When I load up the html file in a browser, it shows the text of the button as well as some of the button image, but whatever falls outside the text gets cut off.
I'd like the button to be fully shown (it's pretty large) with no text at all.
Here's my HTML code:
<link rel="stylesheet" type="text/css" href="style.css">
Fake Button
And here's my css file:
a.likeAButton {
width: 500px;
height: 600px;
background-image: url(./images/buttons/4s_inactive.png);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
a.likeAButton:hover {
width: 500px;
height: 600px;
background-image: url(./images/buttons/4s_active.png);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
a.likeAButton:active {
width: 500px;
height: 600px;
background-image: url(./images/buttons/4s_active.png);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
Any help would be appreciated.

Answer 1

Anchors are inline by default, so they have no size. Try this:
a.likeAButton {
display: inline-block;
...
}
a.likeAButton {
display: inline-block;
width: 500px;
height: 600px;
background-image: url(http://placehold.it/500x600);
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
}
a.likeAButton:hover {
background-image: url(http://placehold.it/500x600/0000ff);
}
a.likeAButton:active {
background-image: url(http://placehold.it/500x600/ff0000);
}
Fiddle demo
Notice that I stripped most of the style statements from your :hover and :active pseudo-classes. There's no need to repeat them.