Link that 'looks like' button 1

[Glasgow]

My page has a number of buttons that effectively only link to other pages. At the moment I have each of these in a separate form - e.g.

    <form method="POST" action="Page1.asp">
    <input type="submit" value="Link 1"></form>
    <form method="POST" action="Page2.asp">
    <input type="submit" value="Link 2"></form>

Is there a way of doing this without creating multiple forms and without graphics?

 

[BillyRayPreachersSon]

Yes - use CSS. However, given that there are many button styles on many different browsers and many different operating systems, giving you CSS for the one that you are thinking about would be impossible.

If you can describe (or show an image of) what you want the button to look like, then we may be able to tell you if it is possible, and if so, provide some CSS to achieve the effect.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[Glasgow]

Thanks Dan. I am using IE6 under XP. The button on my window is exactly as shown for 'Preview Post' and 'Submit Post' in this forum. On my display these are light grey with black text, slightly raised effect with black rounded border. The default button has an additional light blue border within the black outline and, when hovering over the button, the border within the black outline is yellow.

 

[tsdragon]

In other words, standard XP style buttons.

I don't think Glasgow is concerned with the styles, he wants to know how to implement the functionality:

<input type=button value="Link 1" onclick="document.location='link1.asp;'">

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[Glasgow]

That simple huh? Thanks very much Tracy. I can get it working without the semi-colons. Should it be possible to append a query string - e.g.

<input type=button value="Link 1" onclick="document.location='Link1.asp?myquery'">

I've never used the onclick= thingy before. Are there any drawbacks - e.g. issues with non IE browsers for example?

 

[Vragabond]

There's one huge drawback. Onclick is JavaScript event that triggers javascript functions or actions. That means that people who have JS disabled, will be unable to browse your site. A large and important group of JS disabled browsers are search engine spiders, which will not be able to crawl your page.

Also, note that I as a Mozilla user will see your button as just a regular button -- without all the cool WinXP effects. Also, MAC users will see it as default MAC button etc. Your buttons will not look the same in different browsers/OSes. Last but not least, think about it. Are you looking for the functionality of the button (submitting a form) or visual appearance of a button (how it looks). If it is the first, use button. If the second, style the link to look like a button. Remember, visual presentation should not be achieved by html markup but by css styling.

 

[Glasgow]

Thanks Vragabond - it's a bit of a minefield ain't it? Would the same Javascript argument apply to

  Response.Write "<script type=""text/javascript"">alert('" & Msg & "')</script>"

I take your point about the visual presentation issue - which kind of takes me back to the drawing board (sigh!). Any tips as to how to approach this with CSS?

 

[Glasgow]

This needs some tweaking for colours but gives close to the desired effect:

a.button {display:block; background-color:rgb(244,244,240); text-decoration:none; color:white; 
              padding:2px 5px; width:4em; float:left; border-style:outset; border-width: thin; text-align: center;}
a.button:hover { background-color:white; color:blue; }

then

   <a class="button" href="Fred.asp?ST">Click Me</a>

 

[Foamcow]

There are these things called "images"....
Wrap a link around them.

Or, with CSS, make a link and apply a background image to it.
As a very rough example that would require real world alterations

a { backround:url(path/to/my/image.gif) no-repeat; }

That would have the effect of making all your links have a background image (you would also need to size the link with CSS to ensure the whole background image could be seen.



Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[Glasgow]

Thanks. I was aware of such beasts (hence my reference to 'without graphics' in the original post). I knew it must be possible using CSS but wasn't sure where to start. It seems I am now just about there.

 

[mkrausnick]

Another CSS-based one:

<html>
<head>
<style>
/* Blue button */
 .mybutton	{
	background-color:#b3c3e2;
	font-family:arial,helvetica,sans-serif; 
	color:#000066; 
	font-size:8pt; 
	vertical-align:middle; 
	border-left:#66cccc 2px solid; 
	border-top:#99ccff 3px solid; 
	border-bottom:#003399 3px solid; 
	border-right:#3366cc 3px solid;	}
</style>
</head>
<body>
<a class="mybutton" href="#">&nbsp;Click&nbsp;here&nbsp;</a>
</body>
</html>

Mike Krausnick
Dublin, California

 

[Foamcow]

See, I really should read that last line of a post

You won't be able to make a pure CSS equivalent of the XP button control and it's behaviour. At least not using cross browser compatible methods. You could probably do it using IE specific CSS though.

Can I ask why you don't wish to use images? If it's for accesibility reasons then the button text can be HTML with just the body of the button created as an image and applied to links with CSS ruls. Non CSS compatible user agents would then just render the button as it's text label.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[Glasgow]

Mike - thanks!

Foamcow - no strong argument against images but if I can avoid 'unnecessary baggage' then so much the better. It's one less file to download. I'm also trying to learn more about CSS.

 

[Vragabond]

These were the buttons I once created for fun. They employ incorrect :active behaviour according to CliveC.

a:link,
a:visited {
	display: block;
	float: left;
	margin: 2px 5px 2px 5px;
	padding: 2px;
	width: 100px;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid black;
	border-left: 1px solid #cccccc;
	border-right: 1px solid black;
	background: #cccccc;
	text-align: center;
	text-decoration: none;
	font: normal 10px Arial;
	color: black;
}

a:hover { background: #eeeeee; }

a:active { 
	border-bottom: 1px solid #eeeeee;
	border-top: 1px solid black;
	border-right: 1px solid #eeeeee;
	border-left: 1px solid black;
}

 

[kaht]

They employ incorrect :active behaviour according to CliveC.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

 

[CliveC]

Vragabond, I have taken your code and changed the background color for a:active. Since you have a:active and a:hover have the same background you cannot see what I am talking about.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head><meta name="GENERATOR" content="HTMLKISS 4.0 by Tubularity" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
a:link,
a:visited {
    display: block;
    float: left;
    margin: 2px 5px 2px 5px;
    padding: 2px;
    width: 100px;
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid black;
    border-left: 1px solid #cccccc;
    border-right: 1px solid black;
    background: #cccccc;
    text-align: center;
    text-decoration: none;
    font: normal 10px Arial;
    color: black;
}
a:hover { background: #eeeeee; }
a:active {background: green; 
    border-bottom: 1px solid #eeeeee;
    border-top: 1px solid black;
    border-right: 1px solid #eeeeee;
    border-left: 1px solid black;
}
</style>
<title>Link Behavior</title></head><body>
<a href="#">Page One</a>
<a href="#">Page Two</a>
<a href="#">Page Three</a>
</body></html>

Follow these steps exactly, if you are interested.

1. Run the code in IE6.

You will notice that after clicking a button it stays green until another click occurs.

2. Run the same code in Firefox.

You will notice that green shows only for the length of the mouse click.

3. Now modify the CSS to add a:focus BEFORE a:active.

a:focus {background: green; 
    border-bottom: 1px solid #eeeeee;
    border-top: 1px solid black;
    border-right: 1px solid #eeeeee;
    border-left: 1px solid black;
}

4. Now run the code in IE6.

You should notice no change in behavior.
For the next step you will need to close and re-open firefox since it seems to have some refresh issues.

5. Now run the code in Firefox.

You should now notice that Firefox behaves in the same way as IE6 with respect to a:active.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[ChrisHunt]

If, (for some odd reason) you want to catch the beginning of this argument, it's in thread215-1049618 .

Glasgow, you can use the [tt]:active[/tt] pseudo class to make your CSS buttons appear to be pressed in when you click them, but only on up-to-date browsers because IE has a bug in it which Clive has almost alluded to.

Here's how I'd style a link to look like a button:

a.button {
   color: #000;
   background: #CCC;
   border: 3px solid #999;
   border-top-color: #DDD;
   border-left-color: #DDD;
   padding: 2px;
   font-weight: bold;
   font-family: arial, helvetica, sans-serif;
   text-align: center;
   text-decoration: none;
   width: 4em;
   display: block; /* must be a block for width to work */
   float: left;
}

a.button:focus,
a.button:hover {
   color: red;
   -moz-outline: none; /* suppress the default focus box in FF */
   outline: none; /* the same, using (unsupported) CSS2 */
}

a:active {
   border: 1px solid #999;
   padding: 4px;
}

/* IE treats :active as :focus, so undo the above for it */
* html a.button:active {
   color: red;
   border: 3px solid #999;
   border-top-color: #DDD;
   border-left-color: #DDD;
   padding: 2px;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[CliveC]

We could argue all day about which browser has the bug. One of the reasons for browser incompatibilities is imprecise specifications.

In earlier GUIs button "depressed" was used to describe FFs version of a:active. Semantically, at least, "active" would seem more descriptive of the way IE handles it.

FF without a:focus has some degree of focus with dots surrounding the button. Adding focus makes it behave like FF and gives a better visual cue.

Adding a:focus to IE means that you can now tab to the button and press enter without using a mouse at all.

If the goal is browser compatibility I think adding a:focus to the mix is advisable. However, in my tests, a:focus with a:active combined did not have the desired effect. They had to be separate.

Instead of this silly arguing and instant nay-saying, it would be nice if we could come together in a supportive way to learn from one anothers experience and come up with some definitive tips.

For instance, I experimented with a:focus and a:active between FF and IE and the order did not seem to make much difference. However, it may make a difference in other browsers or in other situations. If people reported these differences we could come up with a complete definitive cross-browser approach.

In that spirit, I would like to report that I did not find this to be accurate:

/* IE treats :active as :focus, so undo the above for it */
* html a.button:active {

Adding a:focus enables tabbing and the use of the enter key in IE.

Also Red did not show in a:hover in the given example in either browser.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[Glasgow]

Did I start all this? Sorry! I'm happy, honest, but I confess I have not tested other than with IE6 so far nor have I experimented with all the suggestions (but thanks) - unfortunately time is of the essence.

 

[Vragabond]

Clive, coming together sounds resonable to me. However, have you thought about the arguments in any way?

W3C standards, Chris Hunt, kaht, Cory and I all claim one type of behaviour which is demonstrated in FF.

Clive claims another type of behaviour, which is demonstrated in incorrect code.

Who do you think should make an effort to approach the other team. Nobody here is all knowing and we are all learning but when just about everyone is against you (and it is not just to spite you), maybe you're the one who's wrong. Ever thought of that?

The bottom line is: IE and Geckos interpret :active differently. You claim Geckos interpret it incorrectly eventhough there is endless evidence supporting otherwise and no evidence supporting your claim. You are trying to achieve something via IE's interpretation of :active and you can do that. And if Geckos need :focus for that behaviour to work, be it. However, to do that it is best to follow Chris' advice, because it is better structured and more complete than yours. Also, it employs all the code correctly while (once again) you use :active before :focus, which is incorrect according to the standards.

Adding a:focus enables tabbing and the use of the enter key in IE.

This is another unproven theory that holds no truth. Using IE, I can tab and follow links with enter on any website I go to. And none of them use :focus. :focus is not supported and thus ignored in IE. That is it. It provides no extra special powers.