...

View Full Version : How to make click effect out of picture?



Doop
06-05-2012, 07:33 AM
Hi

I turned a picture I made in Microsoft Paint (I'll be upgrading to Photoshop soon) into a link on my website. The picture basically looks like a button, but obviously nothing happens to the button picture itself when you click on it, it just takes you to the place its linked to. How do I make the picture "pop in and out" when you click on it? In other words, how do I add the iconic button clicking effect to my picture of a button? I have a feeling it involves flash, which I know even less about than html and css.

Thanks

syco__
06-05-2012, 08:25 AM
Try posting some code but i think you could use css like

a: hover { }

or jQuery would do the trick.

Doop
06-05-2012, 09:43 AM
Try posting some code but i think you could use css like

a: hover { }

or jQuery would do the trick.

Thanks for responding, but if I use a: hover { }, then what effect can i type in to make the button actually get depressed inwards like you are pushing in a button in real life? I've seen it on plenty of webpages, but I can't tell how its done by looking at the source code

coothead
06-05-2012, 10:36 AM
Hi there Doop,

and a warm welcome to these forums. ;)

Does this basic example help...

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title></title>

<style>
body{
margin-top:50px;
background-color:#06c;
}
div {
text-align:center;
}
a{
outline:0;
text-decoration:none;
}
button{
width:200px;
height:50px;
background-image:url(http://www.coothead.co.uk/images/aaa.jpg);
border-color:#39f;
background-position:-1px -1px;
outline:0;
font-size:32px;
color:#fff;
}
button:active{
background-position:0 0;
}
</style>

</head>
<body>

<div>
<a href="#"><button>TEST</button></a>
</div>

</body>
</html>

coothead

VIPStephan
06-05-2012, 12:02 PM
The important part is the :active pseudo-class. You can have an anchor with a background image and when you click it (i. e. press the mouse button down, or push the button, respectively), the active pseudo-class is triggered and you change the background image to an image displaying a depressed state of the button.

Doop
06-05-2012, 11:48 PM
thanks, I think I get it now



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum