Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A button that wiggles

A button that wiggles

Simple CSS animation to make a button wiggle. It's meant to draw attention to a call-to-action button.

A Pen by Scott Magdalein on CodePen.

License.

<head>
<link href='https://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<a class="btn" href="#">Call to action</a>
<p class="subtext">Get their attention with a button that wiggles.</p>
.btn {
display: block;
width: 180px;
height: 50px;
font-family: 'Droid Sans Mono', sans-serif;
font-size: 16px;
color: #fff;
background-color: #69A551;
border-radius: 5px;
box-shadow: 0px 3px 0px #3D8C72;
text-align: center;
line-height: 50px;
text-decoration: none;
margin: 50px auto 0;
font-weight: bold;
-webkit-animation: btnWiggle 5s infinite;
-moz-animation: btnWiggle 5s infinite;
-o-animation: btnWiggle 5s infinite;
animation: btnWiggle 5s infinite;
}
.subtext {
font-family: 'Droid Sans Mono', sans-serif;
font-size: 14px;
letter-spacing: .05em;
text-align: center;
}
/* animation */
@-webkit-keyframes btnWiggle {
0% {-webkit-transform: rotate(0deg);}
2% {-webkit-transform: rotate(-1deg);}
3.5% {-webkit-transform: rotate(1deg);}
5% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(0deg);}
}
@-o-keyframes btnWiggle {
0% {-webkit-transform: rotate(0deg);}
2% {-webkit-transform: rotate(-1deg);}
3.5% {-webkit-transform: rotate(1deg);}
5% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(0deg);}
}
@keyframes btnWiggle {
0% {-webkit-transform: rotate(0deg);}
2% {-webkit-transform: rotate(-1deg);}
3.5% {-webkit-transform: rotate(1deg);}
5% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(0deg);}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment