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

This question already has answers here: Closed 11 years ago.

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开发者_如何学JAVA 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

---

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/

---

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.

---

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");
    });
});

---

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

---

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

---

Super Awesome Buttons from Zurb. Requires some CSS3

---

How hard did you look? I googled

"how to make a button using css"

And got excellent links.

The ones I used in the past are:

http://www.thesitewizard.com/css/3d-buttons.shtml

http://www.brainjar.com/dhtml/menubar/

If you google "css button generator" you will also get interesting sites:

http://www.iwebtoolsonline.com/html-and-css-rounded-corner-button-generator

http://css-tricks.com/examples/ButtonMaker/