Stylesheets - Nice buttons

Author

Nice buttons

Bura Tino

2003-12-28, 7:28 am

Hi,

I would like to have submit buttons that have 1. custom styles 2.
still look like there's a light source and 3. change appearance when
you hover overthem. I know there's a way to fake this behavior with
links and javascript. Can someone point to a more elegant solutions?

Thanks!

Bura

Harlan Messinger

2003-12-29, 6:29 pm

"Bura Tino" <bura3no@yahoo.com> wrote in message
news:b7345045.0312280304.2b277ec6@posting.google.com...

quote:

> Hi,
>
> I would like to have submit buttons that have 1. custom styles 2.
> still look like there's a light source and 3. change appearance when
> you hover overthem. I know there's a way to fake this behavior with
> links and javascript. Can someone point to a more elegant solutions?

Like this? Except that the onclick would read something like:

onclick="document.forms[myForm].submit();"

<html>

<head>
<style>
.button {
background-color: #cccccc;
color: black;
font-weight: bold;
font-size: 80%;
font-family: sans-serif;
text-align: center;
border-style: outset;
border-width: 2px;
margin: 5px;
padding: 2px;
cursor: hand;
vertical-align: middle;
}
.navbutton { width: 125px; }
</style>
</head>

<body>

Click one of the following buttons:
<span class="button navbutton" onmouseover="this.style.borderStyle='inset'"
onmouseout="this.style.borderStyle='outset'"
onclick="location.href='http://www.yahoo.com'">Yahoo</span>
<span class="button navbutton" onmouseover="this.style.borderStyle='inset'"
onmouseout="this.style.borderStyle='outset'"
onclick="location.href='http://www.google.com'">Search Google</span>

</body>
</html>

Evertjan.

2003-12-29, 7:29 pm

Harlan Messinger wrote on 29 dec 2003 in
comp.infosystems.www.authoring.stylesheets:

quote:

> <html>
>
> <head>
> <style>
> .button {
> background-color: #cccccc;
> color: black;
> font-weight: bold;
> font-size: 80%;
> font-family: sans-serif;
> text-align: center;
> border-style: outset;
> border-width: 2px;
> margin: 5px;
> padding: 2px;
> cursor: hand;
> vertical-align: middle;
> }
> .navbutton { width: 125px; }
> </style>
> </head>
>
> <body>
>
> Click one of the following buttons:
> <span class="button navbutton"
> onmouseover="this.style.borderStyle='inset'"
> onmouseout="this.style.borderStyle='outset'"
> onclick="location.href='http://www.yahoo.com'">Yahoo</span> <span
> class="button navbutton" onmouseover="this.style.borderStyle='inset'"
> onmouseout="this.style.borderStyle='outset'"
> onclick="location.href='http://www.google.com'">Search Google</span>
>
> </body>
> </html>
>

This seems more intuitive to me:

<span class="button navbutton"
onmousedown="this.style.borderStyle='inset'"
onmouseup="this.style.borderStyle='outset'"
onmouseout="this.style.borderStyle='outset'"
onclick="location.href='http://www.yahoo.com'">Yahoo</span>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Stanimir Stamenkov

2003-12-29, 7:29 pm

Bura Tino wrote:

quote:

> I would like to have submit buttons that have 1. custom styles 2.
> still look like there's a light source and 3. change appearance when
> you hover overthem. I know there's a way to fake this behavior with
> links and javascript. Can someone point to a more elegant solutions?

Most modern browsers support styling the HTML Form elements using a
CSS stylesheet. However IE doesn't support the ':hover' pseudo class
for other than link elements (in HTML - A elements with 'href'
attribute specified). There you would need some JavaScript help.
Here's en example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=US-ASCII">
<title>HTML Form Button Styling Test</title>
<style media="screen" type="text/css">
input.button { background: orange;
border: 2px outset orange; color: white }
input.button:hover { background: yellow;
border-color: yellow; color: black }
</style>
<script type="text/javascript">
function ButtonStyleOver(element) {
var style = element.style;
style.background = "yellow";
style.borderColor = "yellow";
style.color = "black";
}
function ButtonStyleNormal(element) {
var style = element.style;
/* IE have more problems */
//style.background = "";
//style.borderColor = "";
//style.color = "";
style.background = "orange";
style.borderColor = "orange";
style.color = "white";
}
</script>
</head>
<body>

<form action="">
<p>
<input type="reset" class="button" value="Reset"
onmouseover="ButtonStyleOver(this)"
onmouseout="ButtonStyleNormal(this)">
</p>
</form>

</body>
</html>

I've noticed adding:

input.button:active { background: red;
border-color: red; color: yellow }

to the stylesheet, works only in Opera (I've used v7.21) - for that
you may need to write more JavaScript to handle 'onmousedown',
'onmouseup', 'onkeydown' and 'onkeyup' events.

--
Stanimir

Harlan Messinger

2003-12-30, 11:29 am

"Evertjan." <exjxw.hannivoort@interxnl.net> wrote in message
news:Xns9460F29A722F7eejj99@194.109.133.29...

quote:

> Harlan Messinger wrote on 29 dec 2003 in
> comp.infosystems.www.authoring.stylesheets:
>
>
> This seems more intuitive to me:
>
> <span class="button navbutton"
> onmousedown="this.style.borderStyle='inset'"
> onmouseup="this.style.borderStyle='outset'"
> onmouseout="this.style.borderStyle='outset'"
> onclick="location.href='http://www.yahoo.com'">Yahoo</span>

<grin>I agree 100%, in terms of the metaphor. I'm just so used to everything
having a rollover effect these days. I suppose that if a button *looks* like
a button, then maybe it's not necessary to have a rollover effect, which
became necessary when GUIs started having buttons that *didn't* look like
buttons--like flat toolbars with icons on them--and people could no longer
tell what was clickable.

Even so, one could go the extra step with your version and change the label
color or lighten the background color on the mouseover and mouseout events.

There is one hitch to your approach, though: If you keep the mouse button
down while moving the cursor away from the GUI button, the GUI button will
become outset again. If you then move the cursor back to the GUI button with
the mouse button still pressed the GUI button will *remain* outset. This
would lead one to think that the GUI button was now effectively "unpressed",
so that releasing the mouse button should have no effect. But it will: the
GUI button's action *will* happen when you release the mouse button.

It would seem that this could be handled by keeping track of the GUI
button's virtual state in Javascript, so that the mouseover handler could
re-inset the GUI button if its virtual state is "pressed". But then, what of
the case where the mouse button is pressed while the cursor is over the GUI
button, but released after the cursor is moved away? You'd have to trap the
mouseup event over the entire page. But then, what if the cursor is moved
away from the browser altogether before the mouse button is released? There
wouldn't be a way for the browser to be aware of the release.

Unless...do browser elements have a "capture" method, to capture the focus
and allow them to continue to process mouse events no matter where the mouse
is, until the mouse focus is released?

Evertjan.

2003-12-30, 7:29 pm

Harlan Messinger wrote on 30 dec 2003 in
comp.infosystems.www.authoring.stylesheets:

quote:

> There is one hitch to your approach, though: If you keep the mouse
> button down while moving the cursor away from the GUI button, the GUI
> button will become outset again. If you then move the cursor back to
> the GUI button with the mouse button still pressed the GUI button will
> *remain* outset. This would lead one to think that the GUI button was
> now effectively "unpressed", so that releasing the mouse button should
> have no effect. But it will: the GUI button's action *will* happen
> when you release the mouse button.
>

Use <button> in stead of <span> and see what happens,
even in XP standard mode.

Try this version (IE6 tested):

=======================

<html>
<head>
<style>
.button {
background-color: #cccccc;
color: black;
font-weight: bold;
font-size: 80%;
font-family: sans-serif;
text-align: center;
border-style: outset;
border-width: 5px;
margin: 5px;
padding: 2px;
cursor: hand;
vertical-align: middle;
width: 125px; }
</style>
</head>

<body>

<script>
function butt(tx,Href){
t="<button class='button' "+
"onmouseover=this.style.color='red' "+
"onmousedown=this.style.borderStyle='inset';this.style.color='yellow' "+
"onmouseup=this.style.borderStyle='outset' "+
"onmouseout=this.style.borderStyle='outset';this.style.color='black' "+
"onclick=this.style.color='green';if('"+
Href+"'!='undefined')window.open('"+Href+"')>"+tx+"</button>"
document.write(t);
}

butt('qwerty')
butt('a')
butt('z')
butt('zxcvb')
butt('12345678')
butt('cnn','http://cnn.com')

</script>

</body>
</html>

=======================

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Stephen Poley

2003-12-31, 6:29 am

On Mon, 29 Dec 2003 17:27:16 -0500, "Harlan Messinger"
<h.messinger@comcast.net> wrote:

quote:

>"Bura Tino" <bura3no@yahoo.com> wrote in message
>news:b7345045.0312280304.2b277ec6@posting.google.com...
[QUOTE][color=darkred]
>Like this? Except that the onclick would read something like:
>
> onclick="document.forms[myForm].submit();"

Don't forget that this renders the form useless to anyone without
Javascript, so include a standard submit button within a NOSCRIPT
element.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/