Instant touch links and buttons

Link and button hover effect provide feedback to user interaction with mouse, but it causes delay when click on touch devices; especially when used with transitions.

In recent projects I used Modernizr with a custom SCSS mixin to fix that:

@mixin hover {
  .no-touch &:hover { @content }
}

The no-touch class need a custom Modernizr build with Touch Events test.

Example usage:

# Instead of
a:hover {
  color: red;
}

# Write
a {
  @include hover {
    color: red;
  }
}

And for JavaScript event handlers:

var CLICK = Modernizr.touch ? 'touchstart' : 'click';

$('.my-button').on(CLICK, function() { ... })