CSS only click events for animation in emails

CSS only click events are not something that generally have a use in everyday web development because you have access to Javascript. But for standalone uses like emails or offline modes you may find this useful.

If you already use the general sibling selector and know the term ‘checkbox hack’ then this may not be anything new to you and If you have no interest in how the code works then you can just copy and paste it from here.

Just to be clear, these aren’t click events in the traditional sense, they can’t do all of the things that a JavaScript listener and function can do. CSS only click events are perfect for creating some simple animation effects to add interest and interactivity to static pages.

The way we can achieve this is by using radio inputs or checkboxes hidden at the top of the DOM and then trickle down the styles to other elements when they are toggled on and off. The reason I use checkboxes is for toggling something on and off in one button like a switch or alternatively radio inputs can be grouped to perform actions across multiple buttons. To hide the inputs you can use display:none; or position the elements off the page using absolute positioning and negative margins. Either is fine, just use whatever works in the scenario you are using it.

The button can then be made up out of a label element linked to the checkbox or radio input. The labels can be styled to look any way we want them to. It can also be placed anywhere in the DOM and therefore anywhere on the page. The labels just need to point to the input you want to target using for=”name of input here”

We cannot toggle classes or perform functions using JavaScript so we need to get a little creative with CSS. We can use the :checked selector to target our elements we want to change and that will let us know if they have been clicked on or off. By grouping the radio buttons they will toggle the others off when one is selected. You can keep the radio inputs or checkboxes visible to start with and that will let you see them being changed.

CSS checked selector

.change-bg:checked{
    // Code will go here 
}

To apply styles to the element we need to use the general sibling selector, this is now widely available in most browsers and email clients. You can see browser compatibility here and email client compatibility here. This types of interactivity are really a progressive enhancement for more mobile email clients. But with such a wide audience handling emails on their phones and tablets it makes sense to cater for them, there are of course exceptions. For this to work, the element you are changing must be within the same outer element as your checkboxes or radio buttons and below it in the DOM, although it doesn’t have to be directly after it. So the code below would work.

HTML markup example
<input type=”checkbox” class=”change-bg” id=”toggle-switch” name=”toggle-switch” checked>
<div class=”bg-container”>
<div class=”bg”>
<label class=”button” for=”toggle-switch”>Toggle Switch</label>
</div>
</div>

General sibling selector usage

.change-bg:checked ~ .bg-container .bg{
	background:pink;
}

Now you can do anything available in CSS like change visibility, colour, background-image, z-index, position etc. A really nice thing to use with this is the new animated PNG format. You can create some really engaging pages with just CSS which is great for use cases like email templates. You can see more about animated pngs and compatibility here.

The general sibling selector will technically work with hovering on elements too, but this will obviously not work on mobile. Each use case has its own possibilities, you just need to get creative with what’s available to you.

Below is some crude CSS only click events code to play with including a couple of simple animations. I hope it helps!