1. Web Design
  2. jQuery

Put Users in Control With Confirmation Feedback Buttons


This tutorial will teach you how to create a responsive web page with buttons which take on different states depending on the user's interaction. This type of interaction is especially useful on links such as "purchase" or "delete" where it's wise to confirm that the user indeed wants to take a specific action.

This interaction is one that many are familiar with; you can see a similar effect in Apple's app store when purchasing apps.

Apologies for the French, you get the idea..

The page we create in this tutorial will also work on mobile devices, as it's a responsive design.


We'll be creating a sample page based on the Tuts+ network, this page will contain confirmation feedback buttons. Although the example uses "join now" confirmation buttons, you could conceivably use this style of interaction anywhere where you need a user to confirm the action they are about to take.

When and why to choose this interaction

Good UI design gives users a comprehensible sense of power that consistently helps them feel in control.

An important aspect of human computer interaction is conveying to the user a sense of control. When users are in control they feel comfortable. When they aren't in control they get frustrated. But when you think about it, humans are always in control. Computers never do anything without you first instructing them.

This is where the importance of good software and UI design enters the picture. Good UI design gives users a comprehensible sense of power that consistently helps them feel in control. They'll never ask "wait why did that happen?" or "wait how did I get here?"

You can convey a sense of control to the user by communicating insights to them with each interaction. Help them understand cause and effect in the system. To use a basic example, if you save something, the system will give you a positive message saying "your settings have been saved". Thus, users will never question "I wonder if that was saved?"

What does this have to do with the tutorial?

The interaction we'll create in this tutorial helps give the user a sense of control. By changing the button state and having the user confirm their decision to purchase, we make sure that the user never does anything unintentionally. This is especially useful when you're asking users to part with their hard earned money; the last thing anyone wants is to accidentally pay for something!

The beauty of this interaction is that, rather than receiving a pop-up prompt saying "are you sure you want to purchase?", users are notified via the button state change they are about to do something important. If they don't want to do it, they can simply continue to browse the site; whereas an alert prompt would explicitly require the user to make a yes/no decision.

Before you start

Make sure you grab the image file dependencies for this tutorial. Put them in a folder named "images". All your other files (HTML, CSS, JavaScript) will go in the main directory. At the end of the tutorial, your file structure will look like this:

Step 1: Getting Started with HTML

Let's get started by creating some basic HTML that will define our page structure.

So here we have our basic HTML5 page structure. We included our DOCTYPE, our page title, and a main <section> element with an ID of #container

Step 2: Linking to Dependencies

Now, let's add the links to the markup's dependencies.

First we will add a link to our CSS stylesheet (which we will soon create). This goes in the <head> element.

Next we'll include a link to Google's hosted version of jQuery, as well as a link to "script.js" which will hold the javascript code we create later on. Let's put these right before the closing </body> tag.

Because we'll be using HTML5 elements like <header> and <section> we'll need to add the HTML5 shiv so our markup works in IE8. Include this in your header:

Step 3: Designing Flexibly

We'll design this page to be responsive and flexible down to mobile. To ensure mobile browsers render our page correctly we'll have to set the meta viewport property. To learn more about this, check out Ian Yates' article on the viewport meta tag. Otherwise, simply add this snippet of code in your <head> element.

Step 4: Creating the Header Markup

Let's start by adding a page header to our document.

Our header (at different sizes) is pretty basic and looks like this:

Step 5: Creating the List Markup

Now we're going to create an unordered list under our <header> element. We'll use this to wrap our listed items in.

The unordered list

As you can see, we gave our unordered list a class of 'list' which we'll use to target its styles with CSS.

The list item structure:

As you can see, inside of each <li>, we have two main elements; a <div> and a <figure>. The figure element is ideally suited to house our list item's icon. The div with a class of 'info' is where we put the information associated with the icon. Again, this is all contained inside an <li> element.

The icon

Inside of <figure class="icon"> we are going to put the item's icon using the <img /> tag. The figure element's width will be controlled. Then, by stating that the image should have a maximum width equal to the figure, it will resize according to the parent element!

The info

Inside of <div class="info"> we are going to have three elements:

  1. The item's header (using the <h2> element)
  2. The action button (using the <a> element)
  3. The item's description (using the <p> element)

We're going to give our button (the <a> element) a class of "join" for CSS styling later on.

Final code for each <li> element

Here's what we have so far:

Step 6: Duplicating and Modifying Each <li> Element

Now that we have the basic structure for each <li> element, all we have to do is duplicate it for each Tuts+ entry. We have to change the following for each list item:

  1. The <h2> text
  2. The <a href> link
  3. The <img src /> file name

You can go ahead and copy/paste the list item code for each Tuts+ site.

This is what we have now:

Step 7: Basic CSS

Now that we have all our markup complete, let's start styling the page. We'll begin by setting a few basic resets:

Now let's style the main body element.

Here we set the background color and some defaults for our typography such as the type size, color, and line height.

Step 7: Going Responsive (Liquid)

We want our page to be flexible all the way down to mobile. So, the two key components we'll use to achieve this are percentages and the max-width rule.

By looking at our HTML, you'll see <section id="container"> is the main container for our page's content. We'll use percentage values for the width and we'll add some basic styling to separate it visually from the page background.

Here we set our container's width to be 100% of the browser's viewport. Our margins center the content on the page. We also added max-width:600px because we don't want our list items to ever be larger than that.

As you can see, at larger sizes our container has some extra space on the sides with a light background. But at smaller sizes, that extra space disappears and we just have a white background for our content.

Let's not forget to make our images responsive:

Step 8: Header Styles

Now let's style our main <header> element and the content inside of it.

Our header element and its content are now nicely centered and sized.

Step 9: Structural List Item Styles

Now we're going to start styling our list items and their siblings. First, let's create some basic structural styles:

If you remember correctly, inside each list item we have two main elements: 'icon' and 'info'. The icon figure will be floated left and given a small width. The 'info' div will be floated right and given the majority of the parent width.

As you can see, we used the box-sizing:border-box; rule on these two divs. This allows us to have our total width add up to 100% and still be able to add padding without going over a total width of 100% (To learn more about this property, read Encourage Responsive Form Elements to Play Nice).

Step 10: List Item Styles

After our structural CSS additions, we now have something that looks like this:

As you can see, this needs to be cleaned up a little bit. First because we are floating our elements 'info' and 'icon', we need to add a clear to each of the list elements. We'll also add a little styling to each list item.

Lastly, we're going to style the information inside each list item:

Now we have something that's starting to look pretty solid.

Step 11: Button Styles

Now let's apply some styling to our buttons. We'll make them visually prominent:

What did we do here?

We floated our button to the right. This will make the button appear to the right of the main list header.
We used the line-height property to make the button the height we wanted. We also added 1px of padding on the top, this offsets the 1px highlight we added using the box-shadow property.
Visual Styling
We added some visual styles using borders, box-shadows, etc. We also used the CSS3 background gradient feature (you can use helpful generator tools such as ColorZilla for generating your gradients).

Step 11: Alternate Button Styles

Everything is looking pretty good. What we want to do now is add styles for a class that will be applied to the button(s) when they are clicked. For this tutorial, we are going to add the text "join now" to the existing button text when the button gets clicked. Essentially, the user has to make the decision to "join" twice.

To accomplish this, we are going to use some CSS styling, including the CSS3 pseudo class ::after

Clicked class styles

Let's create a class called 'clicked' to which we can add our 'clicked' button styles (for development purposes, you can manually add a class of "clicked" to any <a href="" class="button">$15.99</a>).

As you can see, we attached the 'clicked' class to the 'button' class. That way the styles we declare for 'clicked' will only appear on elements that also have a class of button. As far as styling goes, we simply changed its color and borders. You may also have noticed that we added a box-shadow to the button when it gets clicked. This will added an indented button style that helps reinforce to the user that the button was clicked.

::after class styles

When the user clicks the price button, what we want to do is have the button expand and prepend the text "join now". To do this, we'll use the CSS3 pseudo class ::after to insert the text we want.

Now we have something like this:

Step 12: Media Queries

As you can see, at mobile size our "join now" button is starting to get a little cramped. If our header text is really long, our button will run into our header. So, we'll leverage the power of media queries to bump our action button to the next level when we're on smaller screen sizes.

Let's create a media query for moving our button:

Now our button will bump down below the header at smaller screen sizes!

Step 13: Button Interaction with jQuery

Let's now go into our "script.js" file and write some javascript that will change our button styles when they get clicked.

First, let's setup our script for jQuery

Step 14: Toggling Classes

Our script is actually pretty simple. All we need to do is toggle the class of "clicked" whenever a button gets clicked.

So let's setup a function:

Now, what we want to do is check and see if the button that was clicked already has a class of "clicked" (perhaps it was clicked earlier). If it doesn't have the 'clicked' class, we'll add it and prevent the href attribute of the link from being followed.

If the button that was clicked already has a class of "clicked" the href value will be followed by the browser. This works well because if a user encounters this page and has javascript disabled, they simply won't be able to confirm their decision to "join now". Rather, the link will simply be followed without any confirmation feedback.

Step 15: Removing the Clicked Class

If a user clicks on the price button, they'll get a changed button state. What if they want to dismiss the button and they click outside the button itself? We're going to register that click and remove the class of "clicked". This is a simple line of jQuery:

Step 16: Adding a Transition

We want to add a little bit more interactivity by making the transition between the 'clicked' and normal button states smoother. We'll just use a CSS3 transition and apply it to the 'join' button class:

That's it!

You now have a nice confirmation feedback button. It will help users confirm their choice to make an important decision with your web page/application. Feel free to play around with this concept, make it better and learn more!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.