42

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).

Kevin Pang
  • 41,172
  • 38
  • 121
  • 173
  • *can't quite get the height and vertical alignment to play nice* how does it look like? How should it look like? – Felix Kling Feb 02 '10 at 19:38
  • I'd just like them to look the same. The problem is that the anchor tag's height tends to not match up with the submit button's height in all browsers. Either that or they don't line up perfectly when placed side-by-side. – Kevin Pang Feb 02 '10 at 19:40
  • Just to be clear, both should look like the "Ask Question" button at the top-right corner of StackOverflow. It's not exactly what I'm going for but it's close enough to use as a point of reference. – Kevin Pang Feb 02 '10 at 19:43
  • how possibly web spider considrations and principles force you not to use the same element if you want stuff to look the same? – Hanan Feb 02 '10 at 19:52
  • @Hanan Because web spiders don't have javascript enabled so they'll never hit the Cancel page if I turn the anchor into a button. – Kevin Pang Feb 02 '10 at 19:53
  • why it matters they cant see your cancel? – Hanan Feb 02 '10 at 19:59

9 Answers9

48

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>
bobince
  • 528,062
  • 107
  • 651
  • 834
21

I hope this will help.

<a href="url"><button>SomeText</button></a>
user3233348
  • 307
  • 3
  • 2
  • 7
    http://stackoverflow.com/questions/802839/button-inside-of-anchor-link-works-in-firefox-but-not-in-internet-explorer – Tachyons Feb 18 '15 at 10:27
  • 21
    This isn't even valid HTML. How does it have 18 upvotes? – michael Feb 04 '16 at 05:04
  • 1
    Works on my page in all popular browsers so I am happy with this straightforward simple solution. If it works its valid enough for my purposes. – scriptz Jan 25 '17 at 19:11
  • 3
    @scriptz Even though it works, it is considered invalid HTML and sooner or later it may not work anymore. – Alexandru Severin Aug 03 '17 at 13:03
5

I Suggest you to use both Input Submit / Button instead of anchor and put this line of code onClick="javascript:location.href = 'http://stackoverflow.com';" in that Input Submit / Button which you 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>
Muddasir Abbas
  • 1,699
  • 1
  • 20
  • 37
2

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>
jiten jethva
  • 96
  • 1
  • 5
1

Using a button tag instead of the input, resetting it and put a span inside, you'll then just have to style both the link and the span in the same way. It involve extra markup, but 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;
}
raphaelb
  • 141
  • 1
  • 3
0

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

<button>Cancel</button>

Or maybe an input:

<input type="button" value="Cancel"/>
graphicdivine
  • 10,937
  • 7
  • 33
  • 59
  • This doesn't seem to satisfy the original poster's question, but either of those worked for me, for a button to which I wanted to attach href="#target" for a bootstrap collapse toggle. (The attachment done with .NET codebehind, and needing to wire-up to numbered rows in a ListView) – fortboise Feb 11 '17 at 17:17
0

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

<input type="button" value="Cancel" onclick="location.href='url.html';return false;" />
Joel Etherton
  • 37,325
  • 10
  • 89
  • 104
  • Web spiders don't browse with javascript enabled, so they'll never hit the Cancel url. I guess that's not a huge deal, I was just hoping there was a solution that would work with an anchor tag. – Kevin Pang Feb 02 '10 at 19:58
  • It's not the cleanest, but to put the spider consideration in, you could put a non-displayed link into place next to the button – Joel Etherton Feb 02 '10 at 20:14
0

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

D.Madhushan
  • 1
  • 1
  • 1
    This is a seven year old thread you are replying to and you do so poorly. What does your markup do? How does it answer the question? Don't just blurt out markup. Explain yourself! https://stackoverflow.com/help/how-to-answer – Rob Aug 27 '17 at 02:54
-1

Style your change the Submit button to an anchor tag instead and submit using javascript:

<a class="link-button" href="javascript:submit();">Submit</a>
<a class="link-button" href="some_url">Cancel</a>

function submit() {
    var form = document.getElementById("form_id");
    form.submit();
}
Alex LE
  • 20,042
  • 4
  • 30
  • 28