how to make clickable buttons?

**Kim** · 15 Feb 2010, 06:59 PM

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?

**kab_death** · 15 Feb 2010, 07:41 PM

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

**Jordin** · 16 Feb 2010, 03:00 AM

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.

**kab_death** · 16 Feb 2010, 10:56 AM

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

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.

**kab_death** · 16 Feb 2010, 10:36 PM

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.

**Kim** · 16 Feb 2010, 10:43 PM

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

**kab_death** · 16 Feb 2010, 10:44 PM

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

**Get Em Fast** · 16 Feb 2010, 11:08 PM

kab, there's a nice little tutorial HERE.

Hope this helps.

**kab_death** · 16 Feb 2010, 11:50 PM

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

**kab_death** · 17 Feb 2010, 03:07 PM

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

HTML Code:

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

Thread: how to make clickable buttons?

Thread Tools

Search Thread

Display

Re: how to make clickable buttons

Re: how to make clickable buttons

Easiest or best way to do this?

Re: how to make clickable buttons

help with Button visual effects

Re: how to make clickable buttons

Re: how to make clickable buttons

Re: how to make clickable buttons

Re: how to make clickable buttons

Re: how to make clickable buttons

Similar Threads

Logo link - how can I make clickable space larger?

Make header clickable

How Do I make "Important Links" Clickable?

How can I make my titles not clickable?

Buttons in header not clickable

Posting Permissions