how to make clickable buttons?

hi I'm new to zen cart and am trying to make buttons move or click in when pushed but i don't know code very good so i don't what to do please help. a .gif image that shows what i am talking about has been attached. Thanks ahead of time:hug:

Why and where in ZenCart are you trying to do this?

all buttons will do this in zen cart. why because i want the buttons to be like the button actually pushes in and pops back out i don't want it to stay pushed i want it to be like pushing a button on your keyboard.

i found this html code it does what i want but is this what i do in zen cart?

The zen-cart button-related functions are located in /includes/functions/html_output.php.

OK thanks. what would i change in this file and will all buttons do it or does each button have to be set separately

in this file what do i change please forgive me I'm new to all this code stuff and i do not want to change anything until i know what I am changing

It might be simpler to use the stylesheet for this. I Googled for "button click visual effect using CSS" and got some good links talking about this.

Rob

OK thanks but I'm not sure what i should be looking for on goggle ??? Is there a way to make a button that is 2 different size images of the same button. When you click the button the smaller button image appears then the big button image reappears to make a push in effect for the button??

i would just like to thank all of you for your help so far but I'm still stuck if someone could give an example of how to do this it would help very much. thanks again

:oops: I'm just learning sorry

I'm just learning sorry

May I suggest you do the things you really need to run your business and then work on the things that are only surface dressing?

i this hard? why do you question me i need help with this only. i need to make a button change from one image to another image to make the button look like it moves. but only when someone clicks not when they just put mouse over it. if anyone can help please feel free i just need a basic example of how i would do this and i can handle it from there. all help is greatly appreciated

Does anybody know the most efficient way to do this in zen cart?

I am also wondering the easiest or best way to make my custom button set have visual click effect in zen cart.

I have a custom button set made with 2 images for each button. One image for the button and one for the button when clicked.

Would I have to edit the code in every php file for each button individually or is there a css command I can add to my stylesheet that will let me do this for all buttons at once?

I am hoping there is some way to do this without going into each php file and editing each buttons code individually.

Just looking for a zen cart professionals opinion on which is the fastest or most efficient way to do this on zen cart.

Please Help i have been doing some searches and i am still stuck. I thought this would be one of the easier things to do :cry:

Does anybody know the most efficient way to do this in zen cart?

I am also wondering the easiest or best way to make my custom button set have visual click effect in zen cart.

Would I have to edit the code in every php file for each button individually or is there a css command I can add to my stylesheet that will let me do this for all buttons at once?

I am hoping there is some way to do this without going into each php file and editing each buttons code individually.

Just looking for a zen cart professionals opinion on which is the fastest or most efficient way to do this on zen cart.

Does anybody know the most efficient way to make a custom button set have visual click effect in zen cart.I am also wondering the easiest or best way to do this.

I have a custom button set made with 3 images for each button. One image for the button when highlighted second image for button before clicked and third image for button when clicked.
i also have one solid image with all 3 button variations in one stacked above the others.
Example. 1.
________2.
________3.

Would I have to edit the code in every php file for each button individually or is there a css command I can add to my style sheet that will let me do this for all buttons at once?

I am hoping there is some way to do this without going into each php file and editing each buttons code individually.but if it is the only way that is ok.

Just looking for a zen cart professionals opinion on which is the fastest or most efficient way to do this on zen cart.

Moderator's note - Please don't repost the same problem in a different thread. Your new post has been merged into your original thread.

different question than other one thats why i made a new thread

kab, there's a nice little tutorial HERE.

Hope this helps.

thanks for the tutorial i am also wondering if this is the most efficient way of doing this?

please help i am still stuck i dont know if this is the right way to do the visual effects and if it is how do i apply it to the buttons in zencart?

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Button</title>

<style type="text/css">

* { margin: 0; padding: 0; /* Quick and Dirty Reset */ }

body {
	background: url(t2.jpg);
}

#demo {
	width: 433px; margin: 100px auto;
}

	#demo p a.press-it-btn {
		display: block; /* Change anchor to block element */
		width: 181px; height: 105px; /* Specify width and height of the image. Height is value of each individual button graphic */
		background-image: url(t1.jpg); /* Add the image as a background */
		background-position: top; /* Set the position to the top */
		text-indent: -9999px; /* Send the rendered HTML wording off screen */
	}
		#demo p a.press-it-btn:hover, #demo p a.press-it-btn:focus {
			background-position: center; /* Set the position to the center */
		}
		#demo p a.press-it-btn:active {
			background-position: bottom; /* Set the position to the bottom */
		}

a { outline: none; }
</style>
</head>

<body>

<div id="demo">
	<p><a href="http://" class="press-it-btn">Press it</a></p>
</div>
`
</body>
</html>

Thanks again.:hug: