Sticky Hover Button Fix for Touch Devices

Eliminating an annoying user experience.

Download from GitHub or npm.

---

The Problem on Touch Devices

• button hover effect remains ("sticks") when pressed
• buttons don't provide a visual response while they are being pressed

Sample Buttons

Primary Button Secondary Button Success Button Info Button Warning Button Danger Button Link Style Button

Primary Button Secondary Button Success Button Info Button Warning Button Danger Button

Fix All Buttons

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

Fix All Buttons

---

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:

De-Stickify Buttons

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:

Add Animated Press