Nice buttons

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Bura Tino - 28 Dec 2003 11:04 GMT

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

Reply to this Message

Harlan Messinger - 29 Dec 2003 22:27 GMT

> 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>

Reply to this Message

Evertjan. - 29 Dec 2003 22:50 GMT

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

> <html>
>
[quoted text clipped - 31 lines]
> </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>

Signature

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

Reply to this Message

Harlan Messinger - 30 Dec 2003 15:11 GMT

> Harlan Messinger wrote on 29 dec 2003 in
> comp.infosystems.www.authoring.stylesheets:
[quoted text clipped - 42 lines]
> 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?

Reply to this Message

Evertjan. - 30 Dec 2003 23:23 GMT

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

> 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
[quoted text clipped - 4 lines]
> 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>

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

Signature

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

Reply to this Message

Stephen Poley - 31 Dec 2003 10:23 GMT

>> 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();"

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

Signature

Stephen Poley

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

Reply to this Message

Stanimir Stamenkov - 29 Dec 2003 23:05 GMT

> 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.

Signature

Stanimir

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2003

Nice buttons