Question

I’d like my buttons to look like this in HTML:

<a href="page.html" class="button">Link</a>

And the button class is as follows:

.button { background:url("button_bg.png"); height:33px; display:inline-block; font-size:18px; }
.button:before { display:inline-block; content:""; width:23px; height:33px; background:url("button_before.png"); }
.button:after { display:inline-block; content:""; width:23px; height:33px; background:url("button_after.png"); }

However, there are two problems I am having with this:

1. I’d like ‘before’ and ‘after’ to just display their own background. They currently display their background on top of the “button” class’.
2. The text is aligned at the bottom. I’d like to know the best way to align it centrally. Considering I know the height of the button, I’m sure this is possible in CSS but I’m struggling with that as well.

There is one more thing to note: I would like the ‘before’ and ‘after’ to be a part of the hyperlink. I’m sure it is possible to use a DIV to display these ‘before’ and ‘after’ images but it would then make them separate to the hyperlink.

Answer 1

You could do this to add those images as part of the hyperlink

SAMPLE HTML

<a href="#">
<i class="first-image"></i> /**USE BACKGROUND IMAGE HERE**/
<span class="link-text"></span>
<i class="second-image"></i> /** USE BACKGROUND IMAGE HERE**/
</a>

For centering text vertically,

use height:33px; on tag and set its display:inline-block; and line-height:33px;