Sound effects in email! Yay? Nay? Try it out for yourself with this Bubble Wrap in email example here.

This example works in iOS Mail, Apple Mail and the Samsung email client. (See support table here).

Wrapping The Play Button

The core of technique is pretty straightforward. Each bubble consists of an audio control that plays a pop audio file.

The secret to this example is to have a wrapper element wrap the audio element such that only the play button is exposed. Setting the opacity of the audio element to 0 will then complete the trick.

Having the bubble popping and then re-appearing after a delay is achieved using a transition-delay property that is associated to the “off” state of the :active pseudoclass.

.bubble{
  transition-delay:5s;
  box-shadow: inset 0 -10px 12px rgba(0,0,0,.5);
}
.bubble:active{
  transition-delay:0s;
  box-shadow:none!important;
}