We'll be making this (demo):



The HTML.

Let's start by writing up the HTML necessary for us to make this nice looking button.

<div class="paymentoption creditcard">
    <input class="optionradio" name="paymenttype" value="deposit" type="radio" />
    <span class="optionlabel">Credit Card</span>
</div>

Notice how we're wiring up two different CSS classes. This is in case you want to offer different payment types and you want to set a same default button style, but also change the background image (credit card, moneygram, deposit, etc.).

The CSS.

/* The entire button's container box.*/
.paymentoption {
    width:233px;
    height:125px;
    float:left;
    padding-left:5px;
    padding-top:3px;
}

/* The radio button input */
.optionradio {
    margin-left:4px;
    margin-top:4px;
}

/* The text beside the radio button input */
.optionlabel {
    color:#00246C;
    font-family:Tahoma;
    font-size:14px;
    font-weight:bold;
}

Great, now we need two styles for each event in case the mouse is on the button, and when the mouse is off the button.

.creditcard{
    background-image: url('http://i.imgur.com/qoIwQ.png');
}


.creditcardhover {
    background-image: url('http://i.imgur.com/KEIff.png');
}

The Javascript

First, remember to wrap everything in the document ready event.

$(document).ready(function() {
    //Your code here.
}

Next, let's wire up the events for when the mouse enter or leaves the button:

$(document).ready(function() {
    $('.paymentoption').mouseenter(function() {
        $(this).css('cursor', 'hand');
    });

    $('.paymentoption').mouseleave(function() {
        $(this).css('cursor', 'pointer');    
    });
}

Next let's hook up the event so that when a user clicks anywhere inside the container box, the radiobutton is selected.

$('.paymentoption').click(function() {
    $(this).find('input[name="paymenttype"]').prop('checked', true);
});

And finally the events when the mouse enter and leaves. We're going to switch out CSS class during each of these events. Giving the buttons a nice shine on mouse over.

$('.creditcard').mouseenter(function() {
    $(this).removeClass("creditcard").addClass("creditcardhover");
});

$('.creditcard').mouseleave(function() {
    $(this).removeClass("creditcardhover").addClass("creditcard");
});  

And we're done!

Now we have a nice button that responds well to mouse events and is good from a UX view.

You can see the entire example here:

http://jsfiddle.net/...errez/ZbFWu/71/