Skip to content

Instantly share code, notes, and snippets.

@brod-ie

brod-ie/PulsingCTA.html

Created January 12, 2016 14:12
Show Gist options
  • Save brod-ie/73aefe12ad3d22810677 to your computer and use it in GitHub Desktop.
Save brod-ie/73aefe12ad3d22810677 to your computer and use it in GitHub Desktop.
Download ZIP
Pulsing Call To Action Tap Target
Raw
PulsingCTA.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
body, html {
height: 100%;
background: #fff;
}
.container {
width: 200px;
height: 100%;
margin: 0 auto 0;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
background: #fff;
}
.pulse-button {
position: relative;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
display: block;
width: 25px;
height: 25px;
font-size: 1.3em;
line-height: 100px;
letter-spacing: -1px;
color: white;
border: none;
border-radius: 50%;
background: rgba(1, 110, 255, 0.75);
cursor: pointer;
box-shadow: 0 0 0 0 rgba(1, 110, 255, 0.5);
-webkit-animation: pulse 1.5s infinite;
}
.pulse-button:hover {
-webkit-animation: none;
}
@-webkit-keyframes pulse {
0% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
70% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
}
100% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
}
}
</style>
</head>
<body>
<div class="container">
<span class="pulse-button"></span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment