Built.io Blog

Tap Effect Using Multiple CSS Classes

,

A major aspect of user experience design involves striving to make a website more interactive and straightforward. The highlights, hovers and tap effects play a very important role in making interaction user friendly.

A short tutorial below explicates how to create a tap effect on many elements in a web page using multiple classes.

Note: This tap effect works for both touch and mouse events.

First, we need some Javascript code to add touch and mouse event listeners to the elements. For this we will be using Hammer.js javascript touch library. Although there are many other Javascript touch libraries, I recommend this library as it has an excellent implementation of multi-touch events and swipe gestures.

Lets get started! You’ll have to include the following in your markup:

  1. jQuery
  2. Hammer.js
  3. jquery.hammer.js

Take a look at this code for a button:

<code><div class="button gray-bg touchable">Button</div>
</code>

In the above code, we have created a div tag and added three classes to it:

  • button - This class adds up all the styling needed to make the div look like a button.
  • gray-bg - This class sets a gray gradient background to the button.
  • touchable - This class acts as a selector which we will use to identify this button when initializing the hammer plugin.

Here's the CSS for the button states:

<code>/* Button */
.button {
    border: 1px solid #deddda;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    -webkit-box-shadow: 0 1px 1px #999;
    -moz-box-shadow: 0 1px 1px #999;
    -ms-box-shadow: 0 1px 1px #999;
    -o-box-shadow: 0 1px 1px #999;
    box-shadow: 0 1px 1px #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    padding:7px;
    display: inline-block;
    color: #2497d1;
    font-size: 15px;
}

/* gray background */
.gray-bg {
    background: #f1f1ef;
    background: -moz-linear-gradient(top, rgba(241, 241, 239, 1) 0, rgba(230, 230, 226, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(241, 241, 239, 1)), color-stop(100%, rgba(230, 230, 226, 1)));
    background: -webkit-linear-gradient(top, rgba(241, 241, 239, 1) 0, rgba(230, 230, 226, 1) 100%);
    background: -o-linear-gradient(top, rgba(241, 241, 239, 1) 0, rgba(230, 230, 226, 1) 100%);
    background: -ms-linear-gradient(top, rgba(241, 241, 239, 1) 0, rgba(230, 230, 226, 1) 100%);
    background: linear-gradient(to bottom, rgba(241, 241, 239, 1) 0, rgba(230, 230, 226, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1ef', endColorstr='#e6e6e2', GradientType=0);
}

/* gray background when tapped */
.gray-bg.tapped {
    background: #e6e6e2;
    background: -moz-linear-gradient(top, rgba(230, 230, 226, 1) 0, rgba(241, 241, 239, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(230, 230, 226, 1)), color-stop(100%, rgba(241, 241, 239, 1)));
    background: -webkit-linear-gradient(top, rgba(230, 230, 226, 1) 0, rgba(241, 241, 239, 1) 100%);
    background: -o-linear-gradient(top, rgba(230, 230, 226, 1) 0, rgba(241, 241, 239, 1) 100%);
    background: -ms-linear-gradient(top, rgba(230, 230, 226, 1) 0, rgba(241, 241, 239, 1) 100%);
    background: linear-gradient(to bottom, rgba(230, 230, 226, 1) 0, rgba(241, 241, 239, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6e6e2', endColorstr='#f1f1ef', GradientType=0);
}
</code>

Note in the above CSS we created a combined class for gray-bg and tapped. This rule gets applied to elements having these both classes.

Now lets initialize the Hammer plugin.

<code>var holding = false;

// Initialize the hammer plugin.        
var hammertime = $(".touchable").hammer({
    hold_timeout: 0.000001
});

// add multiple event listeners on the selector.
hammertime.on("hold touchend mouseup", function(ev) {
if(ev.type === 'hold'){
holding = true;
        $(this).addClass("tapped");
    }
    if(ev.type === 'touchend' || ev.type === 'mouseup'){
        if(holding){
            holding = false;
        }
        $(this).removeClass("tapped");
    }
});
</code>

The above code adds a “tapped” class to the selector when the hold event is triggered and removes it when the touchend or mouseup event is triggered. Okay, let’s run the code.

Now, lets add an icon to the button and give it a tap effect. We'll be using this small sprite which contains both normal and tapped version of the star icon.

<code><div class="button gray-bg touchable">
<span class="star-icon"></span>
<span>Button with icon</span>
</div>
</code>

Here, the CSS for the span tag with class star-icon has a star icon set in the background:

<code>/* star icon*/
.star-icon{
    background: url(star-sprite.png) 0 0 no-repeat scroll transparent;
    width: 17px;
    height: 17px;
}

/* tapped version of the star icon */
.tapped .star-icon{
    background: url(star-sprite.png) -23px 0 no-repeat scroll transparent;
    width: 17px;
    height: 17px;
}

.button span{
    display: inline-block;
    vertical-align: top;
}
</code>

Let’s run the code.

The star icon changes its background to its pressed version when we tap the button. This looks cool. Now lets add a tap effect to another element: a list.

<code><ul class="list">
    <li class="touchable list-item">List Item 1</li>
<li class="touchable list-item">List Item 2</li>
    <li class="touchable list-item">List Item 3</li>
    <li class="touchable list-item">List Item 4</li>
    <li class="touchable list-item">List Item 5</li>
</ul>
</code>

This is a markup for a simple list. Note that, li tag has a “touchable” class. This means the hammer adds an event listener to the li tag.

<code>.list-item {
    padding: 10px 15px;
    border-bottom:1px solid #ccc;
    cursor:pointer;
}
.list-item.tapped {
    background: #373735;
    /* Old browsers */
    background: -moz-linear-gradient(top, #373735 0%, #464644 4%, #555452 7%, #51504e 9%, #5b5a58 11%, #535351 16%, #585856 18%, #565654 20%, #51514f 22%, #565654 24%, #595856 31%, #5e5d59 33%, #5a5957 36%, #5b5b59 38%, #565654 40%, #5e5e5c 42%, #636361 44%, #5c5b59 47%, #595957 49%, #605f5d 53%, #595856 56%, #61605e 58%, #61605e 60%, #656462 62%, #605f5d 64%, #5e5e5c 67%, #636260 76%, #686765 78%, #62615f 80%, #696866 84%, #646361 87%, #686765 91%, #6d6c6a 93%, #636260 96%, #676664 98%, #5c5b59 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #373735), color-stop(4%, #464644), color-stop(7%, #555452), color-stop(9%, #51504e), color-stop(11%, #5b5a58), color-stop(16%, #535351), color-stop(18%, #585856), color-stop(20%, #565654), color-stop(22%, #51514f), color-stop(24%, #565654), color-stop(31%, #595856), color-stop(33%, #5e5d59), color-stop(36%, #5a5957), color-stop(38%, #5b5b59), color-stop(40%, #565654), color-stop(42%, #5e5e5c), color-stop(44%, #636361), color-stop(47%, #5c5b59), color-stop(49%, #595957), color-stop(53%, #605f5d), color-stop(56%, #595856), color-stop(58%, #61605e), color-stop(60%, #61605e), color-stop(62%, #656462), color-stop(64%, #605f5d), color-stop(67%, #5e5e5c), color-stop(76%, #636260), color-stop(78%, #686765), color-stop(80%, #62615f), color-stop(84%, #696866), color-stop(87%, #646361), color-stop(91%, #686765), color-stop(93%, #6d6c6a), color-stop(96%, #636260), color-stop(98%, #676664), color-stop(100%, #5c5b59));
    color: #fff;
}
</code>

In the above code we are again combining list-item and tapped classes.

Let’s run the code. You can see that the list items get highlighted when we tap on it.

You can try out the complete example on JSFiddle.

You now know know how to add tap effects to multiple elements on a single page. The important thing to learn in this implementation is that we only need to initialize Hammer.js a single time for the whole page. The rest the work was swiftly handled by CSS.

Subscribe to our blog