Material design style click effects with pointer events and CSS Custom Properties – Ben Frain
DRANK

These days I’m getting a kick remaking things with more modern approaches that used to be problematic.Here’s a little example: a material design style click/selection. What I mean is where you have a button and where you click it creates an effect that starts from the point you clicked/touched.Here is the example we will build:See the Pen Material design inspired buttons by Ben Frain (@benfrain)on CodePen.It used to be necasary to handle touch/clicks separately handling events like touchstart and click individually. Nowadays we can just use pointerdown. So nice!Anyway, let’s get into this:The building blocks — button elements and pointer eventsI’m going to add a few buttons to the DOM. You can tweak the actual effect of the click to your hearts content. However, in terms of requisite mechanics needed to make this work, it’s essential to know just one thing; whereabouts did the user click inside the button? Once you know that you can communicate it back to the DOM so that your CS…

benfrain.com
Related Topics: Material Design CSS