Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make click effect out of picture?

    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

  • #2
    Regular Coder syco__'s Avatar
    Join Date
    Oct 2005
    Location
    Australia
    Posts
    194
    Thanks
    41
    Thanked 4 Times in 4 Posts
    Try posting some code but i think you could use css like

    a: hover { }

    or jQuery would do the trick.
    .pLeAd InSaNiTy.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by syco__ View Post
    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

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there Doop,

    and a warm welcome to these forums.

    Does this basic example help...
    Code:
    <!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

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,698
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    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.

  • #6
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, I think I get it now


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •