"Auto shake CSS button"
Bootstrap 3.3.0 Snippet by ManuSingh

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="text-center"><button class="btn">Button</button></div>
.btn{ background-color:#9fbe3b; position:relative; color:#fff; -webkit-animation: custom-shake 3s ease-in-out 3s infinite; animation: custom-shake 3s ease-in-out 3s infinite; -webkit-transform: translate(0) rotate(0deg); -webkit-transform-origin: bottom; transform: translate(0) rotate(0deg); transform-origin: bottom; width:250px; padding:20px 0px; margin:40px auto; font-size:30px; border-radius:50px; text-align:center; outline:none; border:none; } @keyframes custom-shake { 0% { transform: rotate(0deg); } 80% { transform: rotate(0deg); } 85% { transform: rotate(5deg); } 95% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }

Related: See More


Questions / Comments: