Subscribe to Sergio Tapia - Lost in the GC.        RSS Feed

Creating a nice payment selector button for your website using HTML, CSS and jQuery.

Icon Leave Comment
We'll be making this (demo):

Posted Image


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>

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 {

/* The radio button input */
.optionradio {

/* The text beside the radio button input */
.optionlabel {

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.

    background-image: url('');

.creditcardhover {
    background-image: url('');

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() {

$('.creditcard').mouseleave(function() {

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:

0 Comments On This Entry


Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

0 user(s) viewing

0 Guests
0 member(s)
0 anonymous member(s)

About Me

Posted Image

Bienvenidos! I'm a USA ex-pat living in Bolivia for the past 10 years. Web development is my forte with a heavy lean for usability and optimization. I'm fluent in both English and Spanish. I guest write for the popular Python website Python Central. Visit my website.