Styling an anchor tag to look like a submit button

css, html

Solution

The best you can get with simple styles would be something like:

.likeabutton {
    text-decoration: none; font: menu;
    display: inline-block; padding: 2px 8px;
    background: ButtonFace; color: ButtonText;
    border-style: solid; border-width: 2px;
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
.likeabutton:active {
    border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}

(Possibly with some kind of fix to stop IE6-IE7 treating focused buttons as being ‘active’.)

This won't necessarily look exactly like the buttons on the native desktop, though; indeed, for many desktop themes it won't be possible to reproduce the look of a button in simple CSS.

However, you can ask the browser to use native rendering, which is best of all:

.likeabutton {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-decoration: none; font: menu; color: ButtonText;
    display: inline-block; padding: 2px 8px;
}

Unfortunately, as you may have guessed from the browser-specific prefixes, this is a CSS3 feature that isn't suppoorted everywhere yet. In particular IE and Opera will ignore it. But if you include the other styles as backup, the browsers that do support `appearance` drop that property, preferring the explicit backgrounds and borders!

What you might do is use the `appearance` styles as above by default, and do JavaScript fixups as necessary, eg.:

<script type="text/javascript">
    var r= document.documentElement;
    if (!('appearance' in r || 'MozAppearance' in r || 'WebkitAppearance' in r)) {
        // add styles for background and border colours
        if (/* IE6 or IE7 */)
            // add mousedown, mouseup handlers to push the button in, if you can be bothered
        else
            // add styles for 'active' button
    }
</script>

Problem

I have a form where there's a "Submit" button and a "Cancel" anchor. The HTML is this: ``` <input type="submit" value="Submit" /> <a href="some_url">Cancel</a> ``` I'd like for the two to look and act the same. Nothing fancy, just something similar to how the "Ask Question" anchor looks on StackOverflow. I can get the two to look somewhat similar, with the bounding box, background color, and hover background color, but I can't quite get the height and vertical alignment to play nice with one another. I'd post my CSS but it's such a mess at this point that I think it might be easier to just start from scratch, get a barebones CSS layout working, then move on from there. P.S. I know I could use an instead of an anchor and hook up the onClick event to do the redirect. It's almost a matter of principle at this point now to get this right using an anchor (plus there are web spider considerations to take into consideration here).

Original source

Related problems