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

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/

0 Comments On This Entry

 

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

2 user(s) viewing

2 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.

Categories