badsender logo

Pseudo-class hover and flyover in an email.

29/09/2021

Hey my little chickens ! How are you doing? I know... I haven't published anything for a while. Lack of time ? No... Lack of motivation. It happens sometimes. "Shit happens" as Forrest would say! And yes, it's hard to find subjects for email design orHTML integration for email that have not yet been addressed. Or even worth talking about. But come on, hearts up! Sometimes you have to know take a good whip or I'm all cyanosed !

As you know, I love innovation in emailing: it often brings interaction, attractiveness, life! However, it is also harshly confronted to the laws of techniques and, in this case, of HTML integration for email. So I'm going to talk about a very particular subject, which is not so much impacted by the medium, as we'll see later. It is about hover effects in an email or the pseudo CSS hover class.

Pseudo-classes in emailing.

What is a pseudo-class?

"A pseudo-class is a keyword that can be added to a selector to indicate the specific state of an element. The pseudo-class :hoverFor example, a new feature called "The Selector" will allow the user to apply a particular formatting when hovering over the element targeted by the selector (change the color of a button, for example)."

It is not from me, but from DND Web Docs. No need to thank me. We have a very clear and precise definition. And there is a plethora of pseudo-classes: :focus, :visited, :checked, :active... However, they do not have the same functionality, and not the same support! You can find the support for each of them on the platform caniemail.

The pseudo-class hover allows you to assign a style or a graphical layout to a "hovered" element.

Support: pseudo-class hover and emailing.

As you can imagine, the support of the pseudo-class :hover in an email is not total.

Hover support in email
Support of the hover pseudo-class in an email, distribution according to the six main families of email clients.

On the other hand, the degradation is more than acceptable! And yes, because even if the hover pseudo-class is not supported by all email clients, you have to understand that it is only a specific state. So when the element is not in this hover state (in other words, all the time)It will therefore be displayed correctly, as it was originally designed.

But what does the pseudo-class hover bring to an email?

First of all, the ergonomics.

It is very convenient to see a button "change" when you hover over it. Whether it is a button as we understand it: rounded corners and internal margins... Or a hyperlink. This implicitly tells the recipient that the text is clickable. We have this habit of behavior on the web. My article " Designing Calls to Action in an email In fact, the "Hovering the button in an email" issue was not addressed.

Hover and button hover in an email
Example: the background color of the "Listen" call to action changes when the button is hovered over.

It becomes easy to set up a :hover in your HTML code to indicate what behavior the targeted element should adopt! And for a button, or a call to action, this is very easy to code:

<!DOCTYPE HTML>
<html>
<head>
<style>
.hover01:hover {
	transition:0.5s !important;
	background-color:#FFB283 !important;
}
.hover01:hover * {
	transition:0.5s !important;
	color:#C6131E !important;
}
</style>
</head>

<body style="padding:0px !important; margin:0px !important;">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;" role="presentation">
  <tr>
    <td bgcolor="#050505" align="center"><table border="0" cellspacing="0" cellpadding="0" role="presentation">
        <tr>
          <td bgcolor="#C6131E" style="border-radius:50px; padding:15px 50px;" class="hover01"><p style="margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:18px; mso-line-height-rule:exactly; line-height:25px; text-align:center; font-weight:700;"><a href="#toreplace" target="_blank" style="color:#FFFFFF; text-decoration:none;">#oreplace</a></p></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

In what other cases can I use the hover in an email?

As you can see, the hover in an email will bring you a lot of interaction... and therefore potentially increase the click rate! And let's talk about "Innovation"and the different code techniques or the pseudo-class :hover will find all its usefulness!

Product overview.

You've already come across this feature on a website. I'm sure you have. It's simply a matter of making another image appear when you hover over an image. You don't know what I'm talking about? You will find an example below. Hop, Gérard Majax! And now, imagine that this effect is possible in an email with the hover... I see your eyes sparkling!

And yet, I didn't invent anything, FreshInbox created it. And who even made it available a rollover generator to help you! You just have to fill in the urls of your images. The width, the height. The alternative texts. The links if you wish. And that's it!

Interactive access points.

Do you know what a tooltip is? A tooltip is a short description, usually a few words, that appears when the user places the mouse pointer over a control or other user interface element without clicking. SO, FLY OVER! And if it is a rather common feature on the web and websites, it is also possible to implement it in an email!

pseudo class hover and hotspots
Example of a tooltip in an email

Litmus, or rather Alice Li, did it and detailed it very well in her article " Interactive Hotspots in Email: A Step-by-Step Guide" . A complete tutorial to be able to develop it also at home, all alone, like a big boy!

Panorama and 3D view.

And here, beware, I'm going to sell you a dream... Do you have a 3D view of a product or an environment? Then you will be able to propose an interactive animation around this element thanks to the technique developed by Rémi Parmentier.

Concretely: dream that National Geographic offers a 360° panorama of Scotland directly in their email communications. Or that Nike allows you to rotate their latest sneaker to see it from every angle in their latest newsletter. Or that you can admire the latest Apple product from all angles... Are you there yet? Are you there?

And in case it is not very clear, or your imagination has its limits: here is a concrete example (from our article on the email design redesign for the Olympia) code to "visit" the Olympia hall just by hovering to the right or left.

What conclusion for the hover in an email?

Still, it is a convenient and interesting feature. Recognize it... Because in addition to bringing interaction and innovation, it does not suffer from a particularly annoying degradationSo, frankly, it would be a shame to miss out. So, frankly, it would be a shame to miss out... So, what are you waiting for? I want to see hover responsive buttons in your emails now, I want it to live! And if you don't know how to do it, entrust us with your dream !

Need a design system email ? Or an email design at all? Or an HTML integration for email ? Or an email builder ? We can also offer you :

Badsender also animates a training on the subject of HTML development of an email !

2 Responses

  1. Super interesting, thank you for this article?
    I have a noob question because it doesn't seem to me to be addressed... What about the support on mobile? I mean the hover on a device that has only touch it seems not won?! there are fallback solutions too?

  2. Very good question @olivier! Thanks for asking it! For the responsive version, we're still working on it to get the best and most ergonomic version possible. Stay tuned !

Leave a Reply

Your email address will not be published.