Treehouse: Grow your CSS skills. Land your dream job.

PayPal Rollover Button With CSS, is it possible? (no java)

  • # June 10, 2013 at 5:31 am

    Hello, sorry if this is a noob question, I am just starting out with css/html/etc

    I was wondering is it possible to make a paypal rollover button with css only and NO java?

    -I can add a custom button image to my paypal button, which works fine.
    -I can make the effect I want inside the paypal code by using onmouseover and onmouseout…adding my custom button image one in natural state and one in rollover state. BUT it is done using java, is there a way to do it with css only???

    thank you

    # June 10, 2013 at 6:34 am

    Something like this, maybe?

    That’s the bare-minimum CSS/HTML, so details outside of that will need to be fiddled together separately.

    Other ways to achieve that kind of effect depends a bit on how you’re adding a custom button image. If it’s a background, you could probably use a different background on `:hover`.

    # June 10, 2013 at 6:40 am

    Well I think you mean **javascript** and not java but we get what you mean.

    Mouseover is equivalent to the pseudo class of `:hover` and is applied like this.

    # June 10, 2013 at 8:06 am

    thank you for the answers they both work and create the hover effect.

    BUT where would i put the html inside of the javascript paypal code?

    here is an example of the paypal button javascript:

    Where would i put the html inside of this? Can you just put an html line inside of javascript?


    # June 10, 2013 at 8:16 am

    The “javascript paypal code” isn’t….it’s HTML.

    Are you allowed to change the image without breaking the T&C from PayPal?

    # June 10, 2013 at 8:39 am

    oh so its not javascript, sorry.

    i am going to be using two images for the button and the hover.

    say the images are called “checkout.jpg” and “checkout_hover.jpg”
    they both are the same size 205px by 46px

    how would i insert it into the css? b/c i need to insert both images one in regular state and one in hover

    # June 10, 2013 at 9:51 am

    Like this:

    Note that I have removed the `src=””` from the input.

    # June 10, 2013 at 10:29 am

    ok did that followed it.

    my image shows up and it hovers to the second image when you hover over it. So that is great.

    BUT you can not click on it, like a paypal button.

    It is acting more like an input field and not a paypal link button, when you click on it you can actually type into it.

    What would I do to fix that? or did i do something wrong?


    # June 10, 2013 at 10:44 am

    I can’t type into the codepen example…have you set the input type to ‘image’ in your live version?

    Could you provide us with a link to that.

    Anyway, you can’t just add that HTML to a page and expect it to work out of the box.

    There will be javascript code (presumably provided by Paypal) that will get this all to work and send the form values somewhere.

    # June 10, 2013 at 11:42 am

    sent you a pm

    # June 10, 2013 at 11:48 am

    Unfortunately, I don’t have time to devote myself to this in a 1-1 conversation.

    I could see the button on the testing link you have me.

    Don’t rely on DW for an accurate representation, always test in a proper browser, preferably Chrome &/or Firefox 7/or IE9 at a minimum.

    We’re trustworthy, you can always put a reduced case (without detail) in for all of use to look at.

    # June 10, 2013 at 4:51 pm

    fixed it

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.