Animate the Click Event With Pure CSS

When deciding how to animate an element on the click event the first port of call is usually to set up a JavaScript event listener. What if I told you there was a way of doing so with pure CSS?

Yup, you read that correctly, you can animate your buttons with absolutely no JS whatsoever. The way in which this can be achieved is quite simple, actually. We just need to take advantage of a couple CSS pseudo classes to apply a CSS animation.

What are Pseudo Classes?

If you are already well versed in pseudo classes you can skip down to the nitty gritty by clicking here. Otherwise, read on.

Pseudo classes can seem like some sort of mythical realm to absolute newcomers to web development. For this reason you'd be excused for trying to avoid using them. However, they're not as crazy as they seem. Anyone who is struggling to grasp the concept should dive on in an experiment.

To put it in the most simplest of terms, pseudo classes (not to be confused with pseudo elements) allow us to target (select) CSS elements when they're in a specific state. They are easy to tell apart from traditional CSS classes as they are identified by a preceding colon.

A point which needs to be emphasised is they must be affixed to a traditional CSS selector. For example:

button:hover {
    background-color: red;
}

The above code changes the background colour of all button elements when they are hovered over.

The states which can be targeted vary from :hover (an element which the mouse is currently hovering over), to :last-child (an element which is the last of its kind).

The list of available CSS pseudo classes is quite comprehensive and can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

For a more in depth explanation see the MDN page on pseudo classes and elements: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements

Animate The Click Event With Pseudo Classes

Back to the matter at hand. In order to animate elements with pure CSS the two pseudo classes to use are :focus and :active.

Consider the following:

The :focus pseudo class targets an element which has been brought into focus. This means that it has either been clicked, tapped (on mobile) or selected (using tab on a keyboard).

The :active pseudo class is triggered when the element is, you guessed it, active. This generally means that it is currently being clicked/tapped or the user is pressing down on the enter key.

By taking advantage of the two different states we can add, and then remove, a CSS animation in the time between selecting and activating an element.

Let's have a look at some code.

Step One: Define An Animation

The following block of code will define a CSS animation which creates a popping effect. It does this by first defining the original scale of the element. It then shrinks the element by 30%, and then restores it to its original size.

// Older Safari browsers
@-webkit-keyframes pop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.7);
    }
    100% {
        transform: scale(1);
    }
}
// Standard syntax

@keyframes pop {

0% {

transform: scale(1);

}

50% {

transform: scale(0.7);

}

100% {

transform: scale(1);

}

}

Step Two: Apply the Animation When the Element is Selected

In order to apply the animation we will take advantage of the :focus pseudo class. Remember that the :focus pseudo class is applied when the element is selected. This allows us to alter its appearance before it becomes active.

For this example we will apply the animation to all buttons which appear on the page. Take a note of the fact that we are using the same animation name which was defined above. Also note that we are telling the browser to make the animation last for 0.3 seconds.

button:focus {
    // Older Safari browsers
    -webkit-animation: pop 0.3s;
            // Standard syntax
            animation: pop 0.3s;
}

Step Three: Remove the Animation When the Element is Activated

Now for the CSS wizardry. If you recall I mentioned that there is a slight time lapse between an element being selected and activated. This is what essentially allows us to reset the state of the button. We can achieve this by removing the animation we defined earlier. For this we simply change the value of the animation property to none.

button:focus {
    // Older Safari browsers
    -webkit-animation: none;
            // Standard syntax
            animation: none;
}

Some Points to Note

You may (or may not) already be aware of the fact that the :focus pseudo class can only be applied to elements which can be focused (such as buttons, inputs, anchors). However, you can make an element focusable by making use of the tabindex tag.

You should also be aware that it is possible to achieve the same effect without using both :focus and :active pseudo classes. However, I have found that the effect can act a bit janky when the state of the element is not reset, which is why I opt for applying animation: none with the :active pseudo class.

Finally, and possibly most important, the use of this little trick is not limited to using CSS animations. You can apply any styles you wish using this method so get experimenting!

Love, peace and happiness.

Original link: https://somethingdecent.co.uk/guides/development-and-coding/animate-the-click-event-with-pure-css/