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.
<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);} | |
} |