<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Email Title</title>
<style>
.ExternalClass * {
		  line-height: 100%;
} 

table {
		  border-collapse: collapse;
}
@media screen and (max-width: 600px) {	
	  table[class="outer"]{
		    width:100%;!important;
	  }
}
  
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
 <tr>
  <td>
	<table align="center" width="600" class="outer" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">        
    <tr>
      <td style="text-align:center; font-family:arial;">
        <div class="box">
          <button class="fly">
            <a href="http://emailcodegeek.com/css-game-in-email">Claim your prize</a>
          </button>
          <span style="font-family:Frijole; font-size:30px;">Splat</span>
          <span style="font-family:'Love Ya Like A Sister'; font-size:25px;">the</span>
          <span style="font-family:'Faster One';font-size:40px;">fly</span>
          <span style="color:darkred; font-size:22px; font-weight:bold; padding:0 5px;"><br/>
            Splat the fly, <br/>
            Show the link, <br/>
            Click the link, <br/>
            Claim your prize.</span>
          <br/><br/><br/><br/>
          This is just a concept at the moment, I've not used it for a campaign yet.
          <br/><br/>
          You may note I have not yet added a prize.
          <br/><br/>
        </div>
      </td>
    </tr>
  </table>
  </td>
 </tr>
</table>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Frijole|Love+Ya+Like+A+Sister|Faster+One);
:focus{
  outline:none;  
}
.box{
  background:#fff;
  width:100%;
  position:relative;
}
.fly{
  background:url(http://emailcodegeek.com/wp-content/uploads/2014/03/fly.gif);
  border:none;
  background-position:top;
  height:55px;
  width:55px;
  position:absolute;
  left:10%;
  top:10%;
  animation:fly 10s ease infinite;
    -webkit-animation:fly 10s ease infinite;
}
.fly:hover, .fly:focus{
  background-position:bottom;
  animation-play-state:paused;
    -webkit-animation-play-state:paused;
}
.fly a{
  position:absolute;
  top:55px;
  left:-50px;
  width:150px;
  padding:10px 0;
  background:darkred;
  display:none;
  text-align:center;
  border-radius:10px;
  color:#ffffff;
  font-weight:bold;
  font-family:arial;
  text-decoration:none;
}
.fly:hover a, .fly:focus a{
  display:block;
}
@keyframes fly
{
0% {left:10%; top:10%;} 
10% {left:80%; top:50%;} 
20% {left:0%; top:20%;} 
30% {left:40%; top:90%;} 
40% {left:30%; top:-10%;} 
50% {left:80%; top:50%;} 
60% {left:30%; top:70%;} 
70% {left:40%; top:60%;}   
80% {left:0%; top:70%;} 
90% {left:90%; top:50%;}   
}

@-webkit-keyframes fly
{
0% {left:10%; top:10%;} 
10% {left:80%; top:50%;} 
20% {left:0%; top:20%;} 
30% {left:40%; top:90%;} 
40% {left:30%; top:-10%;} 
50% {left:80%; top:50%;} 
60% {left:30%; top:70%;} 
70% {left:40%; top:60%;}   
80% {left:0%; top:70%;} 
90% {left:90%; top:50%;}   
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.