Grow your CSS skills. Land your dream job.

customized paypal button

  • # October 11, 2009 at 3:34 pm

    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

    # October 12, 2009 at 2:22 am

    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.

    # October 12, 2009 at 5:11 am

    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

    # October 12, 2009 at 12:03 pm

    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

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".