Button is displaying as text, not as an image

Question

How can I make it display an image, rather than text?

<p>
  <a class="btn" onclick="link" target="_blank"
     href="http://www.onestopequineshop.com/product_images/Size%20Charts/Horze.jpg" >
      Size Chart
  </a>
</p>

Answer 1

<p><a class="btn" href=
    "http://www.onestopequineshop.com/product_images/Size%20Charts/Horze.jpg"
    onclick="link" target="_blank"><img src=
    "http://www.clker.com/cliparts/K/K/o/K/N/d/blue-button-hi.png"></a></p>

http://jsfiddle.net/a9ngh8w8/

Answer 2

You can do a number of things:

1) An image input:

<input type="image" src="path/to/your/image" title="size chart" />

2) An image within a button:

<button type="button"><img src="path/to/your/image" alt="size chart" /></button>

3) An image within an anchor:

<a href="#" role="button" target="_blank"><img src="path/to/your/image" alt="size chart /></a>

where "path/to/your/image" is " http://www.onestopequineshop.com/product_images/Size%20Charts/Horze.jpg "

Answer 3

You could try to make it an actual button by making it a div instead of a picture that is linked.

The tag defines a division or a section in an HTML document. The tag is used to group block-elements to format them with CSS. Tips and Notes. Tip: The element is very often used together with CSS, to layout a web page. -www.w3schools.com/tags/tag_div.asp

To take a tutorial on divs go to http://www.codecademy.com/courses/web-beginner-en-f8mcL/2/1