By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,787 Members | 1,124 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,787 IT Pros & Developers. It's quick & easy.

Nice buttons

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a

"Bura Tino" <bu*****@yahoo.com> wrote in message
news:b7**************************@posting.google.c om...
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>

Jul 20 '05 #2

P: n/a
Harlan Messinger wrote on 29 dec 2003 in
comp.infosystems.www.authoring.stylesheets:
<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)
Jul 20 '05 #3

P: n/a
Bura Tino wrote:
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
Jul 20 '05 #4

P: n/a

"Evertjan." <ex**************@interxnl.net> wrote in message
news:Xn********************@194.109.133.29...
Harlan Messinger wrote on 29 dec 2003 in
comp.infosystems.www.authoring.stylesheets:
<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>


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

Jul 20 '05 #5

P: n/a
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
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.s tyle.color='yellow' "+
"onmouseup=this.style.borderStyle='outset' "+
"onmouseout=this.style.borderStyle='outset';this.s tyle.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)
Jul 20 '05 #6

P: n/a
On Mon, 29 Dec 2003 17:27:16 -0500, "Harlan Messinger"
<h.*********@comcast.net> wrote:
"Bura Tino" <bu*****@yahoo.com> wrote in message
news:b7**************************@posting.google. com...

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.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.