Sticky Hover Button Fix for Touch Devices

Eliminating an annoying user experience.

Download from GitHub or npm.


The Problem on Touch Devices
Sample Buttons

Fix All Buttons

Fix up all buttons on a page — but only if this is a touch-capable device.

Click or press Fix All Buttons above

Manual Changes

De-Stickify Buttons

When a button is pressed on a touch device, the button "hover" effect remains ("sticks" to the button) until something else on the page is touched.

This fix dynamically eliminates all CSS rules containing both '.btn' and ':hover'.

Click below to eliminate these button hover rules:

Click or press De-Stickify Buttons above

Animate Button Press

Once the sticky hover effect is removed, a button will no longer change visually when it is pressed.

This fix adds the 'focus' and 'active' classes to a button when it is pressed, then removes those classes when the finger is lifted.

Click below to activate anminated press for all buttons:

Click or press Add Animated Press above