tom 0

I want to apply a background image to a link <a> so that it's styled like a button.

Do I have to convert it to from an inline to block element (display:block) in order to set the height and size or is there another workaround?

4 answers

BPartch 342
This was chosen as the best answer
<a href="URL"> <div class="button">Iam a Link</div></a>

Is invalid HTML. You cannot place block level elements inside inline elements.


`<a class="button" href="#" title="#">Link text</a>`

  background: url(image.jpg);
  width: 100px;
  height: 30px;
Answered about 7 years ago by BPartch
  • Thanks - I have another related question though :p! What's the best way of getting the text vertically centered in relation to the image? tom about 7 years ago

To vertically center a line of text within an "image" just set the line-height to the height of the button.

Answered about 7 years ago by Anthony Lemmer
Saiyan 113

maybe you can just use this:

<a href="URL"><img src="IMAGE" height="100" width="100" alt="Click Me"/></a>

so the whole image is a link and you can size it like you want to

Edit: You could also place a div with a background image into the link like this.

<a href="URL"> <div class="button">Iam a Link</div></a>

and this is the CSS:

        background: url(image.jpg);
        height: 100px;
        width: 400px;
Answered about 7 years ago by Saiyan
Armada 0

Why not use a real button with a javascript redirect?

<button type="button" onclick="window.location=''">Click Me!</button>

Or without javascript

<form action="">
    <input type="submit" value="Click Me!" />
Answered about 7 years ago by Armada
  • I would avoid this as you can do it with no need for JS + you never know when a user might have JavaScript disabled. BPartch about 7 years ago
  • You mean by using a form with the address as the action? Armada about 7 years ago