Creating jQuery event-based CSS buttons

A website that has an original look stands out from the rest. CSS buttons therefore are important. Perhaps they are even trivial to implement using basic CSS and jQuery events. However, creating any high-quality work requires a thorough examination of the ingredients.

In this tutorial we will create custom CSS buttons that may look like this:

Custom CSS styled buttons: watch, cancel and delete.

Or how about navigation bar buttons like these?

CSS navigation bar with buttons and a logo.

The buttons shown here are 3 times the original size.

These sets can be accomplished using simple CSS styles. But the most important ingredient of a good looking button is attention to detail. We can’t carelessly slap gradients and colors onto a button. There is something subtle about how the human eye picks up on the smallest details.

History of Buttons

In the past, when it came to creating buttons our choices were limited to HTML’s <input> and <button> tags. Their extent ranged from using the default button rendered by the browser itself to using custom images as the background of the button element. In addition the programmer could simply wrap an <img> tag with an <a> tag and remove the border of the image by setting it’s border attribute to zero as in <b>border = 0</b>.

These techniques still work. But they have many flaws. For example on older Windows (that may still be in use today,) the default button would appear as a plain button in gray color. On the newer Windows operating systems the native button looks better, but it may not always fit the theme of the custom website or UI you are developing.

With text using basics font like Arial or Verdana which is almost the only thing you can change about the default HTML buttons, we are stuck with the limitations of the native button design.

But we are not in the 1990’s anymore. These shortcomings have since evolved. Modern buttons are created using CSS styles, jQuery and Ajax. The HTML and CSS elements of a button represent its visual style, of course. jQuery is used to dynamically change the appearance of the button depending on whether the mouse cursor is over or out of the button?s HTML element.

And finally Ajax is used to execute some function on the server once the button is clicked (like a PHP file that returns a value). Of course, the action that occurs when the button is clicked on could have been just a client-side JavaScript function. In fact, that is probably what most buttons are used for.

However, linking button actions to Ajax events that run some type of a script is not uncommon. Buttons come in different types and flavors. What should happen when a button is clicked is usually determined within a function known as a callback function

$("div#my_button").click( function() { /* Do something */ } );

Here the callback function is highlighted in light yellow. As you can see, it is passed to jQuery’s click method as the only argument.

Choosing the Base Element: DIV or A

Let’s create a rule. All elements that are buttons will inherit the CSS class “button”. In other words, in order for the web page to consider an HTML element a button we will apply the class named “button” to that element using the class attribute as in:

<a class="button"></a>    or    

<div class="button"></div>

Does it have to be this way? Of course not. But you are the developer, you create these rules. For the purpose of this tutorial I chose to do it this way, but it’s certainly not a universal rule cast out of iron or stone for creating CSS buttons.

The button we are about to create is going to have a base element. We can use any blocking (commonly for buttons positioned with position: absolute) or inline elements (for buttons positioned with position: relative) such as
<div> or <a> to represent our button.

Sometimes it makes sense to make the button out of the <a> tag (which creates a hyperlink) and simply re-style it into a button and mute HREF functionality. You may think that <a> is a convenient choice because by default the <a> tag is already clickable. However, this is not a good reason for choosing the <a> tag to create buttons at all. In fact the default clickability of the <a> tag should be muted entirely if we want it to serve as a CSS button.

Later on you will see that we will override all button events using jQuery’s .bind() method instead of using the href or onclick attributes. Doing it this way makes it easy to switch to DIV later on if in fact you do run into some type of a CSS style conflict that has to do with element tag name collisions.

Let’s compare the two HTML tags that can be used to spur the roots of HTML button creation:

<a class="button" href="#">Okay</a>

<div class="button">Okay</div>

Normally, we should reserve the <a> tag specifically for hyperlinks to avoid clashing CSS styles between hyperlinks and buttons that may be added later on in our project.

We can, however create a special button and refer to it by its class name. Such a button can be created using the A.button {…} style as in <a class=”button” href=”#”>Okay</a> as long as we promise ourselves that all buttons will be created this way (to keep our CSS files organized and easier to work with).

Working on a serious web project your responsibility is to do everything in your power to ensure that the buttons created using the <a> tag will work the same and look the same in all browsers. While I try to maintain at least some cross-browser compatibility in my tutorials you can say that this tutorial is mainly limited to the Chrome, Firefox, Safari and the latest version of Internet Explorer browser.

Writing a different tutorial for each browser could interfere with the fundamental concepts presented here and I think one could write an entire book talking about the differences between browsers alone.

Keep Things Simple At The Root

Choose one tag. But don?t choose both (A and DIV) to represent different buttons. Sticking to one tag may prevent future confusion. Within the context of this tutorial I am going to explain the details of using both: the <a> tag and the <div> tag to create buttons which are pretty much the same minus some trivial differences.

jQuery Tutorials