Just the weekly tutorials.

Rerouting <A HREF> functionality for custom CSS buttons

Yesterday (7/26/12) I introduced a completely new tutorial about creating CSS buttons. Today we will continue exploring this subject with emphasis on using the A tag as the button base element. This entire tutorial was inspired by the latest tutorials from my e-book.

Last night we left off our discussion with choosing either A or DIV tag for our buttons. But the A tag requires more attention before we can use it as a CSS button.

The DIV tags don?t have to deal with the HREF attribute. Aside from that the two tags will produce identical results. However, for this to be true within our script there are a few things you should know about the <A> tag.

Dealing with A and HREF

The <A> tag has the infamous HREF attribute which is used to specify the destination of the hyperlink. But we don?t want a button created using the <A> tag to go to a web page. In other words, we want our universal button to be able to respond to a click event. But we don?t want to do that using the onclick attribute either. After all, this is a jQuery tutorial and jQuery offers the convenience of using events which are accessible within a single point in our JavaScript code. Being able to access important code from a single point in our script will save time working on our application in the long term.

jQuery allows us to bind events to our buttons and this code will always be stored in the same place during initialization of our web page (let?s say within the $(document).ready event.) This will prevent us from having to jump from one onclick element to another throughout the entire HTML part of our web application. And when the time comes to deal with modifying button functionality in the future we can always refer to that single place in our code. And save ourselves a headache.

Let?s now talk more about the HREF attribute. As we just discussed we will be using jQuery events instead of onclick and HREF attributes. This means that we need to figure out a way to completely disable HREF.

You probably already know that when instead of providing a URL we can use the number symbol # followed by a custom anchor name (like #Paris) as HREF value. This will make the vertical scrollbar "jump" to the anchor location named ?Paris? on your website. In other words

Clicking on this link: <A href = "#Paris">Go to paris</A> the page will jump to a location marked by this code:

<A name = "Paris">Travel to Paris</A>

We can simply use just the # symbol as in Return to top of the page and this way, seeing how the anchor name is not provided at all, the web page will jump back to the very beginning.

This is the default hyperlink functionality. But we want this to be completely disabled for our button. We don?t want the button to go to any URLs or anchors. And we definitely don?t want our button to jump back to the very top of the page when it?s clicked. But we do want something to happen when a button is clicked using a jQuery event. We?ll discuss that momentarily. For now let?s disable the HREF functionality completely by doing one of the following:

1. Use javascript: return false; as the HREF value, as in href = ?javascript: return false;? 2. Specify return: false as the value of the onclick attribute, as in onclick = ?return false;? 3. Remove HREF attribute completely. Example <a class = ?button?>Okay</a>

All 3 techniques will disable the default function of the A HREF tag.

You may have not expected technique 3 to work. But in my tests, it worked without a problem in Chrome, Firefox and Internet Explorer. In other words, by not specifying the HREF attribute at all we are telling HTML that this is just an anchor, not a hyperlink.

The behavior of the A tag depends on the presence of the HREF attribute within the tag. With it, it behaves like a hyperlink. Without it, it behaves like an anchor. Essentially by skipping HREF we are turning the anchor into a button, not the hyperlink.

The cursor pointer icon is also dependent on the existence of HREF attribute within a tag. When you hover over the HREF-less tag with your mouse it will no longer turn into a proper pointer cursor. It will turn into a text-selection cursor. But that?s not a problem. We can re-add the correct mouse pointer cursor back again by forcing the CSS style on our buttons as in:

A.button { cursor: pointer; } /* Getting the mouse pointer back into a HREF-less A */

That works. But wait. Let?s take care of one more thing. The <A> tag used for buttons might still be rendered as a hyperlink. This means it will display an underline text decoration under the button?s name which is the text printed inside the button. This of course wouldn?t happen with a DIV. But in order to prevent that from happening in an A tag, let?s also remove the text decorations by enforcing the following CSS style on all buttons whose class is ?button?:

A.button { text-decoration: none; }

Once we handle the HREF tag by applying the aforementioned CSS styles to our A-tag based buttons we are pretty much left with the equivalent of a DIV tag. At this point this stripped down A tag will behave in the same way as a DIV-based button would.

From this moment on, given that we understand the changes we just made to the A tag, we can continue the discussion of creating custom buttons in such way that would apply to both the A and the DIV tags equally in the same exact way.

Choosing the DIV tag as the base element for our buttons saves us from having to deal with ?preparing? the A tag for turning it into a button. Which tag you will use in your web application for creating CSS buttons is up to you. Just make sure that you stick to one tag to avoid complications later on.

Whichever tag you will use to create your buttons, one thing is clear. We will simply use the jQuery?s .click(...) method or ?bind? the click action using the .bind(...) method to the anonymous callback function that will execute the code when the button is clicked.

I think we are equipped withe enough knowledge to start experimenting with the code.

Let?s walk through the process step by step and create a few buttons. First, we need to determine the HTML and CSS. We already discussed that the button will be defined using either the A or DIV elements. Either way, notice the class=?button? is present.

<A class = ?button?>Okay</A> <A class = ?button?>Cancel</A> <A class = ?button?>Delete</A>

Alternatively, you can use the DIV tag. Notice the abscence of onclick attribute in either case.

<DIV class = ?button?>Okay</ DIV> <DIV class = ?button?>Cancel</ DIV> <DIV class = ?button?>Delete</ DIV>

Button CSS Styles

Now let?s write the CSS. To add interactivity to our button we want to have at least 3 different CSS styles for mouseover, mouseout and mousedown events.

Default Style

First we will need to determine the main CSS style which will describe the color, border style and the gradient of the button. This is the default style that will be applied to all buttons:

CSS styles - cancel button example.

The button displayed here is several times larger for clarity. It's actually quite small and the border is only 1px. In tomorrow's newsletter edition you will receive the final Part 3 of 3 where we will cover jQuery mouse events and the final source code for the buttons. This last part will also put everything we have discussed so far together!

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.

Ps: I am currently Tweeting jQuery tutorials. You may want to tune in if you are a Twitter user. Thanks to everyone who retweeted my posts. It helps a little with promoting my book. I really do appreciate the amazing support I have received so far.

Just the weekly tutorials.