cloudfour/cloudfour.com-patterns

Explore alternate button pointer effects

Closed this issue · 0 comments

Our current button animation includes a scale effect on :hover and :active:

Image

The goal of this is to introduce just a little bit of surprise and whimsy into the typical static button styles.

This currently introduces some awkwardness for interfaces that rely on the button positions being static. For example, an input group where an input and button appears to detach on :hover and :active:

Image Image

In a recent PR (#2140) I almost removed these styles entirely, but @Paul-Hebert had some interesting suggestions for alternate explorations: #2140 (review)

Some potential ideas that may or may not be worth exploring:

  • Cranking up the filter a bit. (maybe brightness(130) saturate(110)?) Is that too much? We'd need to test text contrast, too... 🤔
  • Could we scale the button's content without scaling the actual button? This might allow us to keep a similar energy to the current buttons, while side-stepping the issues with adjacent content
  • Giving the "white" background buttons (secondary and dark-mode primary) a subtle background color when hovered
  • Using different BG shades for all hovered buttons
  • Could we give buttons a gradient background when hovered?
  • Other fun hover effects? Border animations? I dunno...