<button> tag for hyperlinking

HTML & CSS
1

hi again :slight_smile:

how can i make a button which directs to a particular URL upon clicking it?

this is what i have so far, which is amazingly pathetic :smiley:


<button onClick=""></button>

thanks

and can anyone tell me if i should use the <button>ā€¦ i think iā€™ve read somewhere that this is deprecated in XHMTL 1.0 and will be removed in the next specā€¦ is that right?

2 
onclick="location.href=[b]URL[/b]";

That may or may not work for you ā€“ I give no warrantiesā€¦ :wink:

As for <button>, I think itā€™s fine in XHTML. However, if youā€™re using this as a link, I wouldnā€™t use <button> at all, and just apply CSS to a normal link ā€“ that way itā€™ll work with people without JavaScript or who donā€™t support <button>. Oh, normal <a> links are also more accessible and search engines can follow better, too. :slight_smile:

~~Ian

3

thanks Ian! :slight_smile:

iā€™m using a button because itā€™s to complement a Submit buttonā€¦ i figured itā€™d be more consistent that wayā€¦ could you suggest a better way? using a normal hyperlink (anchor tag) wouldnā€™t really fit in beside the Submit button (at least to me it looks weird)ā€¦ and search-engine spidering (?) is not an issue because itā€™s an Intranet appā€¦

thanks!

4

you can ā€œfakeā€ a button with CSS. Gives this a go:

<html>
<head>

<style type="text/css">
.fakebutton {
  border: medium outset #ff0000;
  background-color: #ff0000;
  text-decoration: none;
  padding: 2px;
}
</style>

</head>

<body>
<a href="bwaf.html" class="fakebutton">Fake Button</a>
</body>
</html>

Tested on Mozilla but I didnā€™t get time to test it in IE. Tweak for best effect :slight_smile:

5

Works in IE 5.5. Itā€™s ugly though.

:slight_smile:

6

Hereā€™s a prettier one (tweaked and checked in IE6):

.fakebutton {
  border: 2px outset #cccccc;
  background-color: #cccccc;
  text-decoration: none;
  padding: 2px;
  font-family: verdana;
  font-size: 10px;
  color: black;
}
.fakebutton:active {
  border: 2px inset #cccccc;
}
7

geezeā€¦ all that codeā€¦

use a form instead with hidden fields!

8

just use this:

<input type=button value=ā€˜Click Hereā€™ onClick=ā€œjavascript: document.location.href=ā€˜http://www.yoururlhere.comā€™ā€>

9

Originally posted by AljapaCo
[B]geezeā€¦ all that codeā€¦

use a form instead with hidden fields! [/B]

that wonā€™t work because i need the button for hyperlinkingā€¦ what good is a hidden field to me :confused:

and thanks skunk for all that helpā€¦ really appreciate it :)ā€¦ iā€™m thinking Ianā€™s should work best though i havenā€™t tried it (iā€™m not willing to do it nowā€¦ must wait till workdayā€¦ ;))

thanks everyone!