CSS: Unique Button Hover Treatments by Device Size
1 min readJun 24, 2018
The Challenge: Create different views for interactive buttons depending on device screen size. The design firm wants large text buttons to change color and text on hover for the larger screen sizes (tablets and up) vs. a static mobile view incorporating various font sizes and colors.
The Solution:
- Create two HTML structures for each button — one for mobile, one for bigger screens.
2. Style the mobile button to spec. Use pseudo CSS to create button effect for large screen buttons. Account for different breakpoints in relation to font sizes.
