Looking for some CSS that will make my links look like buttons

Question

Possible Duplicate:
How do I make an html link look like a button?

I've looked around on the web. Found some links to very colorful buttons that don't look like buttons at all :-)

Is there anyone out there that has some CSS they found or came up with that could help me to make my links look like "real" buttons that I see when I use a "submit" type button in a form.

I don't mind if the CSS uses graphic backgrounds. Just looking for something that simulates a button as close as possible. I could also use jQuery as I have that on my page.

Thank you very much

I agree with CrazyJugglerDrummer on this one, just use regular `button`s. If it has to look like a button, it should probably be a button, not a link. — You, Jul 02 '11 at 16:21

score 9 · Answer 1 · answered Jul 02 '11 at 16:27

For instance:

a {
    background:#eee;
    text-decoration:none;
    color:#333;
    font-family:Arial, sans-serif;
    font-size:11px;
    font-weight:bold;
    padding:3px 5px;
    border:1px solid #aaa;
    border-radius:3px;
    cursor:default;
}

a:hover {
    background-color:#f2f2f2;
    border-color:#888;
    box-shadow:0 0 2px #ccc;
}

a:active {
    vertical-align:-1px;
}

Live demo: http://jsfiddle.net/QTRpb/1/show/

score 6 · Accepted Answer · edited Jun 13 '13 at 09:40

6

In webkit and gecko there is the -webkit-appearance and -moz-appearance properties that does what you want. I'm not sure on support in other browsers – you'd need to check. Here's a demo:

http://jsfiddle.net/kZ2WE/2/

In CSS3 there is a standard property appearance, but, as of june 2013, it isn't supported in any browser.

The proprietary extensions work for Chrome, Safari (webkit) and Firefox (mozilla). It isn't supported at all nor in IE niether in Opera.

edited Jun 13 '13 at 09:40

JotaBe

38,030
8
98
117

answered Jul 02 '11 at 16:32

Rich Bradshaw

71,795
44
182
241

1

Thanks. I will certainly use these for those two browsers. Saved me a lot of work. – Robert Dawson Jul 02 '11 at 19:11

score 2 · Answer 3 · answered Jul 02 '11 at 16:31

You could just use buttons instead of anchor elements. Don't put the button in a form and the page won't change when clicked. Give the buttons unique IDs, and have jquery attach event handlers to the buttons' click events that open a new web page.

$(document).ready(function(){
    $("#mybutton").click(function(){
        window.open("mypage.html");
    });
});

score 1 · Answer 4 · answered Jul 02 '11 at 16:18

1

Maybe this could be useful for you: 22 CSS Button Styling Tutorials and Techniques.

answered Jul 02 '11 at 16:18

mhmpl

1,045
2
13
29

score 0 · Answer 5 · answered Jul 02 '11 at 16:22

0

Try the brief tutorial at the below link, it shows how to use a button as a hyperlink. Not sure what would happen with all those forms if you had loads of these on the same page though!

http://www.htmlgoodies.com/tutorials/buttons/article.php/3478871/So-You-Want-A-Link-Button-Huh.htm

answered Jul 02 '11 at 16:22

hermiod