Nice buttons

**Harlan Messinger** · Jul 20 '05, 09:07 PM

Re: Nice buttons

"Bura Tino" <bura3no@yahoo. com> wrote in message
news:b7345045.0 312280304.2b277 ec6@posting.goo gle.com...[color=blue]
> 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?[/color]

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

onclick="docume nt.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="th is.style.border Style='inset'"
onmouseout="thi s.style.borderS tyle='outset'"
onclick="locati on.href='http://www.yahoo.com'" >Yahoo</span>
<span class="button navbutton" onmouseover="th is.style.border Style='inset'"
onmouseout="thi s.style.borderS tyle='outset'"
onclick="locati on.href='http://www.google.com' ">Search Google</span>

</body>
</html>

**Evertjan.** · Jul 20 '05, 09:07 PM

Re: Nice buttons

Harlan Messinger wrote on 29 dec 2003 in
comp.infosystem s.www.authoring.stylesheets:
[color=blue]
> <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="th is.style.border Style='inset'"
> onmouseout="thi s.style.borderS tyle='outset'"
> onclick="locati on.href='http://www.yahoo.com'" >Yahoo</span> <span
> class="button navbutton" onmouseover="th is.style.border Style='inset'"
> onmouseout="thi s.style.borderS tyle='outset'"
> onclick="locati on.href='http://www.google.com' ">Search Google</span>
>
> </body>
> </html>
>[/color]

This seems more intuitive to me:

<span class="button navbutton"
onmousedown="th is.style.border Style='inset'"
onmouseup="this .style.borderSt yle='outset'"
onmouseout="thi s.style.borderS tyle='outset'"
onclick="locati on.href='http://www.yahoo.com'" >Yahoo</span>

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

**Stanimir Stamenkov** · Jul 20 '05, 09:07 PM

Re: Nice buttons

Bura Tino wrote:
[color=blue]
> 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?[/color]

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:ho ver { background: yellow;
border-color: yellow; color: black }
</style>
<script type="text/javascript">
function ButtonStyleOver (element) {
var style = element.style;
style.backgroun d = "yellow";
style.borderCol or = "yellow";
style.color = "black";
}
function ButtonStyleNorm al(element) {
var style = element.style;
/* IE have more problems */
//style.backgroun d = "";
//style.borderCol or = "";
//style.color = "";
style.backgroun d = "orange";
style.borderCol or = "orange";
style.color = "white";
}
</script>
</head>
<body>

<form action="">
<p>
<input type="reset" class="button" value="Reset"
onmouseover="Bu ttonStyleOver(t his)"
onmouseout="But tonStyleNormal( this)">
</p>
</form>

</body>
</html>

I've noticed adding:

input.button:ac tive { 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** · Jul 20 '05, 09:07 PM

Re: Nice buttons

"Evertjan." <exjxw.hannivoo rt@interxnl.net > wrote in message
news:Xns9460F29 A722F7eejj99@19 4.109.133.29...[color=blue]
> Harlan Messinger wrote on 29 dec 2003 in
> comp.infosystem s.www.authoring.stylesheets:
>[color=green]
> > <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="th is.style.border Style='inset'"
> > onmouseout="thi s.style.borderS tyle='outset'"
> > onclick="locati on.href='http://www.yahoo.com'" >Yahoo</span> <span
> > class="button navbutton" onmouseover="th is.style.border Style='inset'"
> > onmouseout="thi s.style.borderS tyle='outset'"
> > onclick="locati on.href='http://www.google.com' ">Search Google</span>
> >
> > </body>
> > </html>
> >[/color]
>
> This seems more intuitive to me:
>
> <span class="button navbutton"
> onmousedown="th is.style.border Style='inset'"
> onmouseup="this .style.borderSt yle='outset'"
> onmouseout="thi s.style.borderS tyle='outset'"
> onclick="locati on.href='http://www.yahoo.com'" >Yahoo</span>[/color]

<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.** · Jul 20 '05, 09:07 PM

Re: Nice buttons

Harlan Messinger wrote on 30 dec 2003 in
comp.infosystem s.www.authoring.stylesheets:
[color=blue]
> 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.
>[/color]

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=th is.style.color= 'red' "+
"onmousedown=th is.style.border Style='inset';t his.style.color ='yellow' "+
"onmouseup=this .style.borderSt yle='outset' "+
"onmouseout=thi s.style.borderS tyle='outset';t his.style.color ='black' "+
"onclick=this.s tyle.color='gre en';if(\'"+
Href+"\'!=\'und efined\')window .open(\'"+Href+ "\')>"+tx+" </button>"
document.write( t);
}

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

</script>

</body>
</html>

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

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

**Stephen Poley** · Jul 20 '05, 09:07 PM

Re: Nice buttons

On Mon, 29 Dec 2003 17:27:16 -0500, "Harlan Messinger"
<h.messinger@co mcast.net> wrote:
[color=blue]
>"Bura Tino" <bura3no@yahoo. com> wrote in message
>news:b7345045. 0312280304.2b27 7ec6@posting.go ogle.com...[color=green]
>>
>> 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?[/color][/color]
[color=blue]
>Like this? Except that the onclick would read something like:
>
> onclick="docume nt.forms[myForm].submit();"[/color]

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

Web Matters - Main Page

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

Nice buttons

Nice buttons

Comment

Comment

Comment

Comment

Comment

Comment