How to make <a href=""> link look like a button?

html css
GeekedOut picture GeekedOut · Dec 2, 2011 · Viewed 386.5k times · Source

I have this button image:
enter image description here

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?

Answer

Declan Cook picture Declan Cook · Dec 2, 2011

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/

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More