How to make an HTML anchor tag (or link) look like a button?

I have this button image:

I was wondering whether it would be possible to make a simple

<a href="">some words</a> 

and style that link to appear as that button?

If it is possible, how do I do that?

Solution 1:

Using CSS:

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    line-height: 25px;
}

<a class="button">Add Problem</a>

http://jsfiddle.net/GCwQu/

Solution 2:

Check Bootstrap's docs. A class .btn exists and works with the a tag, but you need to add a specific .btn-* class with the .btn class.

eg: <a class="btn btn-info"></a>

Solution 3:

you can easily wrap a button with a link like so <a href="#"> <button>my button </button> </a>

Solution 4:

Something like this would resemble a button:

a.LinkButton {
  border-style: solid;
  border-width : 1px 1px 1px 1px;
  text-decoration : none;
  padding : 4px;
  border-color : #000000
}

See http://jsfiddle.net/r7v5c/1/ for an example.