Just the weekly tutorials.

Applying mouse events to custom CSS buttons

Yesterday we talked about the A tag and determined the default style of our CSS buttons. Today we will complete our discussion with Part 3 which is the final part. Here we will talk about the implementation of jQuery mouse events. You will also be given the complete source code and a live demo of the buttons we have been creating in this series.

If you like my newsletter, please check out my jQuery tutorial book. It has even more tutorials! The current promotion is 30% off for a limited time. There are 137 pages and it costs only $25 which makes it about 0.18 cents per page. So far the book received very positive response.

So, our goal is to match the button with the theme of the rest of the website. That?s entirely up to you and your sense of design. Let?s take a look at how border-radius can change the appearance or ?feel? of the entire button.

Variations of the Cancel button with square and rounded corners using border-radius property.

Aside from the three examples above using border-radius that is far greater than half of the button?s height will result in an angle that makes a perfect circle, making both sides of the button perfectly round. That?s why in the Default Style we started with I set border-radius to the value of 32px. Half of our button?s height is far less than that because it?s just an A element. But if we provide a value that is larger than half of the height of the HTML element the roundness of the button will reach its maximum and stop there, looking like half of a perfect circle.

Button style is a personal choice. You can change the border-radius value to anything you want. Simply experiment with different values until you achieve something that looks good.

On Hover

When we hover the mouse pointer over the button, we want the button to change its appearance. One of the best ways to achieve this subtle effect is by slightly changing the color of the border, the font color and adding an outset shadow using the box-shadow property:

The Cancel CSS button with border, color and box-shadow styles.

The .buttonOn class does not need to define all of the values of the Default Class because it will simply inherit all of them from A.button. What we need to do is to overwrite some of the values. I indicated new box-shadow property and the overwritten properties in red color.

The new color #bbbbbb is probably not very far from #cccccc of the original button. But you have to believe me that these subtle adjustments make the experience of using the button feel much more elegant.

The idea is to apply subtle changes. It is therefore a good habit to avoid changing style properties from one extreme to another just because we have hovered the mouse cursor over the button. The same goes for the font color. We apply a subtle, almost invisible change on hover.

Pressed Down

And finally we need a third style that is applied to a button when the mouse button is pressed down. I have experimented with an inverse gradient. However, the button in this state looked much more elegant if I simply made the background a solid gray color.

The cancel button: css style explained.

After conducting a few CSS experiments I have determined that the optimal styles for all three states should look close to something compared to what you are seeing below. So far we have arrived at these three styles:

Cancel button: three states: default, hover and pressed.

Of course, we don?t have to stop here. You can continue applying further changes to match the buttons with the theme of your website. But this is a very good base to start with.

So far, we have briefly discussed the CSS code for creating three different button states. I even mentioned the linear-gradient property in the very first example. But even though the CSS property linear-gradient is a WC3 standard, it will not work in Chrome.

I wanted to find a way to easily create gradients without having to define solutions that worked in all browsers by hand. Moreover, I needed a solution that would produce the same results in all browsers. After a quick Google search, I found what I was looking for.

The CSS code gradient for the background of the buttons was created using this extremely powerful online CSS gradient tool. It makes sure the gradient looks the same in all browsers. In addition, you can simply copy and paste the generated code into your CSS file.

Instead of cluttering the page with the source code listing for the entire CSS, let me give you a link to the actual button.css file which describes the styles we have discussed in this section.

Download buttons.css http://www.learnjquery.org/book/sourcecode/buttons.css

Now that we have A.button, .Hover and .Pressed defined we can use jQuery to program the logic of our buttons. We have discussed jQuery events earlier in the book. But in addition to events we will use jQuery?s methods .addClass and .removeClass to dynamically add and remove the CSS classes we have just created when a mouse event (such as mouseover) occurs.

Attaching Mouse Events to the Buttons

Let?s take a look at a very simple jQuery event system that will switch the CSS classes of our buttons depending on whether the mouse is in over, out, pressed, and released state.

$(document).ready( function() { // What should happen to all .button elements when the mouse is over the element? $(?.button?).mouseover( function() { // Add .Hover $(this).addClass(?Hover?); }); // What should happen to all .button elements when the mouse is outside of the element? $(?.button?).mouseout( function() { // Remove .Hover and also remove .Pressed if it was present from a previous action. $(this).removeClass(?Hover?).removeClass(?Pressed?); } // What should happen to all .button elements when the mouse button is pressed down? $(?.button?).mousedown( function() { // Add class .Pressed $(this).addClass(?Pressed?); } // And finally, what happens when the mouse is released? $(?.button?).mouseup(function() { // Remove class .Pressed $(this).removeClass(?Pressed?); }); }); // End of $(document).ready

We just linked the MouseOver, MouseOut, MouseDown and MouseUp events (they can all appear in lowercase, it doesn't matter) with the previously created CSS button styles and took care of all special cases. For example, notice that the MouseOut event also removes class .Pressed from the button. This is necessary because when the mouse cursor leaves the button element from a pressed state it is important to return the button to its default style again. If we didn?t do that, the button would continue to look like it is still pressed even though the mouse curors is no longer on it.

Running this code inside $(document).ready(...) is important because we only need to attach these events once. We use .addClass and .removeClass accordingly inside of each callback.

From this moment on, you can physically change the CSS style of each button and the functionality will remain the same. If you need the buttons to look different than the ones in this example you should easily be able to modify them without losing the event functionality.

And finally here is the complete working demo.

View CSS Button Demo

As you can see the buttons are tiny. But in the tutorial they were big. Sometimes we need to think of everything in complete detail. In other words... zoom in on the problem and do a thorough analysis of what is going on. I can't pretend that these are the absolutely best CSS buttons out there. Even these can be improved. But breaking down a complex problem into a number of smaller pieces helps with putting the puzzle together.

People recognize subtle elegance in your work. This is true for styling any part of your website, not just the buttons. To achieve a great result is never about knowing jQuery or CSS alone. It's also about being confident enough to know that you can do it. Never settle for just "good enough." Instead, go one step further. Work on one more CSS style. Experiment with different styles until something looks great.

I hope you enjoyed this tutorial. I am probably working on my next newsletter edition as you're reading this. I might be working on the Image Slider tutorial. That's next. Meanwhile check out the new revision of my jQuery tutorial book. I lowered the base price in an attempt to increase value vs. the cost. So the current promotion is 30% off if you pre-order before the end of this month. It's an instant download. The promotion itself ends in a few days.

Just the weekly tutorials.