[ACCEPTED]-Styling an anchor tag to look like a submit button-css

The best you can get with simple styles 18 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 17 kind of fix to stop IE6-IE7 treating focused 16 buttons as being ‘active’.)

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

However, you 11 can ask the browser to use native rendering, which 10 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 9 have guessed from the browser-specific prefixes, this 8 is a CSS3 feature that isn't suppoorted everywhere yet. In 7 particular IE and Opera will ignore it. But 6 if you include the other styles as backup, the 5 browsers that do support appearance drop that property, preferring 4 the explicit backgrounds and borders!

What 3 you might do is use the appearance styles as above 2 by default, and do JavaScript fixups as 1 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>

I hope this will help.

<a href="url"><button>SomeText</button></a>

0

I Suggest you to use both Input Submit / Button 3 instead of anchor and put this line of code 2 onClick="javascript:location.href = 'http://stackoverflow.com';" in that Input Submit / Button which you 1 want to work as link.

Submit Example

<input type="submit" value="Submit" onClick="javascript:location.href = 'some_url';" />

Button Example

<button type="button" onClick="javascript:location.href = 'some_url';" />Submit</button>

Using CSS:

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

<a href="some_url" class="button ">Cancel</a>

0

Using a button tag instead of the input, resetting 4 it and put a span inside, you'll then just 3 have to style both the link and the span 2 in the same way. It involve extra markup, but 1 it worked for me.

the markup:

<button type="submit">
    <span>submit</span>
</button>
<a>cancel</a>

the css:

button[type="submit"] {
    display: inline;
    border: none;
    padding: 0;
    background: none;
}

Links and inputs are very different things, used 3 for very different purposes. Looks to me 2 like you need a button for the cancel:

<button>Cancel</button>

Or maybe 1 an input:

<input type="button" value="Cancel"/>

Why not just use a button and call the url 1 with JavaScript?

<input type="button" value="Cancel" onclick="location.href='url.html';return false;" />

HTML

<a href="#" class="button"> HOME </a>

CSS

.button { 
         background-color: #00CCFF;
         padding: 8px 16px;
         display: inline-block;
         text-decoration: none;
         color: #FFFFFF;
         border-radius: 3px;
}
.button:hover{ background-color: #0066FF;}

Watch the tutorial

https://youtu.be/euti4HAJJfk

0