customized paypal button

[simto77]

Hello

After following another excellent screencast on this site, I have made a Paypal button. I have made a custom image, but I cannot make a hover and an active state for the button…
This should be quite simple but since the button is a <form> I can’t seem to make it do what I want.

Any ideas?

What I have now don’t seem to make any sense.

Here’s a link:
http://www.simontornby.dk/detour/kobdvd.html

Code:

Code:

div#button {
position: absolute;
margin-top: 30px;
margin-left: 200px;
display: block;
width: 200px;
height: 30px;
}

div#button:active {
background-image:url(‘detour_img/dvdknap2.png’);
background-repeat:no-repeat;
}

Thanks
Simon

[AshtonSanders]

Simon,

I like what you’re doing, but you’re missing some CSS basics:

Here is the HTML for your button:

Code:

Your CSS selector is grabbing a div with the ID of button… which doesn’t exist:

Code:

div#button {

I don’t know exactly what your trying to do, but I have a feeling you need to make the <div id="button"> around your input instead of around the form. Just a wild guess… I haven’t watched the video you mentioned.

Looking at this again, It may be the ":active" which is killing this in some browsers.

[simto77]

Thanks for the quick reply.
Basically I want to make my own customized PayPal button, with a .png file.

I have now tried defining the button as this

Code:

CSS:

Code:

div.button {
background: transparent url(‘detour_img/dvdknap.png’) no-repeat scroll bottom center;
display: block;
float: left;
height: 30px;
width: 200px;
text-decoration: none;
text-indent: -9999px;
}

div.button:active {
background-position: top center;
outline: none;
}

Hereby I have now tried making the button act as the navbar, with a css sprite. The active state works, but pressing the button does not do a thing now. I still think there must be some real easy solution to this, but I can’t seem to get it…

thanks
Simon

[simto77]

Hello again.

I seem to have solved it myself.

this is the code:

Code:

I changed the last string from input to button and now it works…

Simon

[Author]

Posts