PDA

Click to See Complete Forum and Search --> : Button Depression

ChelleWSU
09-16-2006, 06:00 PM
I'm sure this has already been asked a million times, but I'm new to web building. So, here it goes: I'm trying to make my button look like it's being pushed when being clicked. I know there's a way to do it, so if anyone can help a newbie, that's be great.
WebJoel
09-16-2006, 07:01 PM
This is probably a bit complicated if you're new, but otherwise you'd be using javascript 'onMouseDown' and 'onMouseUp' and using image buttons which I assume that you do not have any of. This is a purely CSS method to get a similar result without javascript:

<style type="text/css">
body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */

ul {list-style-type:none;}

ul.buttons li a
{display:block; width:70px; color:#000000; background-color:#fde2bb;
padding:6px; padding-left:4px;border-left: 8px solid #00ad63;
border-right:8px solid #00ad63;font: 13px arial, sans-serif;
font-weight: bold; text-decoration: none;text-align: center; margin-top:2px;}

ul.buttons li a:hover
{list-style-type:none;width:66px;background-color:#ffffff;
border-left: 10px solid blue; border-right: 10px solid blue;
font:13px verdana; font-weight: bold; text-decoration:none;}

ul.buttons li a:active {width:66px;background-color:#ffffff;
border-left: 10px solid red; border-right: 10px solid red;
font:13px verdana; font-weight: bold; text-decoration:none;}
</style>
</head>

<body>
<ul class="buttons">
<li><a href="#nogo" title="HOME">Home</a></li>
<li><a href="#nogo" title="Page 2">Page 2</a></li>
<li><a href="#nogo" title="Page 3">Page 3</a></li>
<li><a href="#nogo" title="Page 4">Page 4</a></li>
<li><a href="#nogo" title="Page 5">Page 5</a></li>
</ul>

</body>
The amount of code you see looks intimidating, but it is nothing really. It's just styling of colors and borders mostly.
ChelleWSU
09-16-2006, 09:49 PM
Thanks, but what does it look like? I have the graphics I want to use, I understand a bit about java. I just want to be able to make it work without complicated script or changing any of my colors.
meinsla
09-16-2006, 10:17 PM
I thought buttons already had that feature.
WebJoel
09-17-2006, 07:08 PM
<img src="blue_button.jpg" height="50" width="75"
onmouseDown="this.src='red_button.jpg'"
onmouseUp="this.src='blue_button.jpg';" >

Where "blue_button" is the 'at rest' state, "red_button" is the 'depressed' state. "blue_button" and "red_button" are exactly the same size (50 pixels tall by 75 pixels wide. Adjust sizes of the respective image AND the height=/width= in the first line above).

They 'swap images' with the "onmousedown" and "onmouseup" action.

Is this more what you're after?
ChelleWSU
09-17-2006, 07:11 PM
It didn't work. The depressed image didn't show up. Maybe I put it in the wrong spot. Where should I put it?