Making a

Question

Basically, I like the way that <input type="submit"> is styled, with the clickable button when you add a little CSS. However, regular buttons are not styled as such, they have no such clickability without some major CSS or JS, and you have to use images.

I made submit buttons into links, by using the form action, but this requires me to make a new form for each button. How can I find a happy medium? Using multiple forms is causing problems in my styling that I can't seem to fix unless I find another way to make buttons that are links in HTML, that have a default style that makes them have a pressed state (and I don't mean browser default settings).

Any ideas?

score 75 · Accepted Answer · edited Mar 05 '17 at 18:31

75

<a href="#"><button>Link Text</button></a>

You asked for a link that looks like a button, so use a link and a button :-) This will preserve default browser button styling. The button by itself does nothing, but clicking it activates its parent link.

Demo:

<a href="http://stackoverflow.com"><button>Link Text</button></a>

edited Mar 05 '17 at 18:31

TrakJohnson

1,755
2
18
31

answered Jul 27 '10 at 08:09

edeverett

8,012
33
28

Interesting solution that I have never thought of! So I'm guessing that the button doesn't catch click events or prevent them bubbling? – thomasrutter Nov 05 '11 at 02:38
Not that I'm aware of. I believe that a button outside a form is an entirely neutral element like anything else. – edeverett Nov 08 '11 at 21:50
works fine in IE11 and Edge, but you shouldn't do that according to HTML5 specification – Picard Jan 26 '16 at 08:42
1

Hmm... interesting. You gone and got me to read the specs. The HTML5 specs says no "interactive content". "Interactive content" definition cites – edeverett Feb 10 '16 at 20:31
2

I just ran into this recently. You should never nest a block element inside an inline element. See my answer below. – joby-flick Feb 19 '18 at 15:46
12

Don't do this, it's not valid HTML. https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5 – Boris Verkhovskiy Jan 09 '20 at 19:31
2

It's also worth pointing out that for tabindex behaviour, bot the link and button are focusable unless you remove the button from the tabindex ordering. Codepen example: [https://codepen.io/latchy/pen/YzpPebK](https://codepen.io/latchy/pen/YzpPebK) – Latchy Feb 01 '21 at 01:25
Why is this the top comment? I wasted like an hour styling this and now I have to redo it. – Divyansh Nov 11 '22 at 18:16

joby-flick · Answer 2 · 2022-05-17T17:17:52.940

IMPORTANT: <button> should never be a descendent of <a>.

Try <a href="http://stackoverflow.com"><button>Link Text</button></a> in any html validator like https://validator.w3.org and you'll get an error. There's really no point in using a button if you're not using the button. Just style the <a> with css to look like a button. If you're using a framework like Bootstrap, you could apply the button style(s) btn, btn-primary etc.

jsfiddle : button styled link

.btnStack {
  font-family: Oswald;
  background-color: orange;
  color: #000;
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
a.btnStack:hover {
  background-color: #000;
  color: #fff;
}

<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<a href="http://stackoverflow.com" class="btnStack">stack<b>overflow</b>.com</a>

score 8 · Answer 3 · answered Nov 03 '17 at 07:10

8

Use javascript:

<button onclick="window.location.href='/css_page.html'">CSS page</button>

You can always style the button in css anyaways. Hope it helped!

Good luck!

answered Nov 03 '17 at 07:10

Freeranger

113
1
10

1

This kills certain features like "Open in new Tab". – H.B. Aug 13 '22 at 00:06

score 5 · Answer 4 · answered Jul 27 '10 at 05:49

5

You have three options:

Style links to look like buttons using CSS.

Just look at the light blue "tags" under your question.

It is possible, even to give them a depressed appearance when clicked (using pseudo-classes like :active), without any scripting. Lots of major sites, such as Google, are starting to make buttons out of CSS styles these days anyway, scripting or not.
Put a separate <form> element around each one.

As you mentioned in the question. Easy and will definitely work without Javascript (or even CSS). But it adds a little extra code which may look untidy.
Rely on Javascript.

Which is what you said you didn't want to do.

answered Jul 27 '10 at 05:49

thomasrutter

114,488
30
148
167

Does making separate
elements cause any sort of spacing? I've tried to make my two buttons appear side-by-side but the stylesheets I'm using (I didn't write them) are very numerous and must have some sort of margins or padding somewhere that causes them to be on top of each other. Any way I can override this or find out where the styling is held for this particular element?
– AKor Jul 27 '10 at 06:26
2

You'd use CSS to remove the spacing. Install Firebug and use "Inspect Element" to find out where the existing spacing is coming from. – thomasrutter Jul 27 '10 at 06:27

score 1 · Answer 5 · answered Jul 06 '12 at 22:11

1

A little bit easier and it looks exactly like the button in the form. Just use the input and wrap the anchor tag around it.

<a href="#"><input type="button" value="Button Text"></a>

answered Jul 06 '12 at 22:11

Jared

19
1

score 1 · Answer 6 · answered Mar 16 '20 at 19:24

1

<a id="reset-authenticator" asp-page="./ResetAuthenticator"><input type="button" class="btn btn-primary" value="Reset app" /></a>

answered Mar 16 '20 at 19:24

Nithya

17
2

Nealv · Answer 7 · 2010-07-27T08:43:24.207

-3

The 3 easiest ways IMHO are

1: you create an image of a button and put a href around it. (Not a good way, you lose flexibility and will provide a lot of difficulties and problems.)

2 (The easiest one) -> JQuery

<input type="submit" someattribute="http://yoururl/index.php">

  $('button[type=submit] .default').click(function(){
     window.location = $(this).attr("someattribute");
     return false; //otherwise it will send a button submit to the server

   });

3 (also easy but I prefer previous one):

<INPUT TYPE=BUTTON OnClick="somefunction("http://yoururl");return false" VALUE="somevalue">

$fn.somefunction= function(url) {
    window.location = url;
};

edited Jul 27 '10 at 08:43

answered Jul 27 '10 at 08:17

Nealv

6,856
8
58
89

1

The image option will not have the behaviours of a normal browser button (expanding according to text content, depressing, etc.) The Javascript option is overkill and leaves a useless button in the page if Javascript fails to load or is turned off. – edeverett Jul 27 '10 at 08:22
if you know some css and cutting the image button WILL stretch and WILL have the behaviour of normak browser buttons. – Nealv Jul 27 '10 at 08:23
For my sins I've done this plenty in the past, but coping with things like text scaling and the different browser's default button styles make styling a link as a fake button a time consuming compromise. It can work in limited circumstances but is not something I'd recommend. – edeverett Jul 27 '10 at 08:40
I wouldn't recommend it either, it was only an alternative :) but ok I'll leave it by that – Nealv Jul 27 '10 at 08:44

Making a

7 Answers7

Linked

Related

Making a that's a link in HTML

7 Answers7

Linked

Related

Making a