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

[seaside33]

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

[Paulie_D]

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.

http://codepen.io/Paulie-D/pen/GqECu

[seaside33]

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:

http://codepen.io/seraphzz/pen/Bemyt

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

Thanks

[Paulie_D]

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

http://codepen.io/Paulie-D/pen/wFtAg

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

[seaside33]

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

[Paulie_D]

Like this: http://codepen.io/Paulie-D/pen/lKCBb

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

[seaside33]

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?

thanks

[Paulie_D]

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.

[seaside33]

sent you a pm

[Paulie_D]

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 Codepen.io for all of use to look at.

[seaside33]

fixed it

[Author]

Posts