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
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