Bootstrap snippet: pulse effect

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: css,effect



<div class="container bootstrap snippets"> <button class="btn btn-info wave in">Button</button> <button class="btn btn-primary wave in">Button</button> <button class="btn btn-danger wave in bd-danger">Button</button> <button class="btn btn-warning wave in">Button</button> <button class="btn btn-default wave in">Button</button> </div>
body{ margin-top:20px; background: #2dc3e8; } @-webkit-keyframes wave { 5% { opacity: .6; } 27% { -webkit-transform: scale(1.8); opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes wave { 5% { opacity: .6; } 27% { -moz-transform: scale(1.8); opacity: 0; } 100% { opacity: 0; } } @-o-keyframes wave { 5% { opacity: .6; } 27% { -o-transform: scale(1.8); opacity: 0; } 100% { opacity: 0; } } @keyframes wave { 5% { opacity: .6; } 27% { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -ms-transform: scale(1.8); transform: scale(1.8); opacity: 0; } 100% { opacity: 0; } } .wave.in { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .wave.in:after { content: ""; top: 3px; left: 5px; position: absolute; width: 50px; height: 50px; background-image: 8121991; background-image: -webkit-radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%); background-image: -moz-radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%); background-image: -o-radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%); background-image: radial-gradient(center center, farthest-side circle, rgba(26, 175, 93, 0) 70%, #f5f5f5 100%); border: 4px solid #fff; -webkit-animation: wave 3s 1s infinite linear; -moz-animation: wave 3s 1s infinite linear; -o-animation: wave 3s 1s infinite linear; animation: wave 3s 1s infinite linear; zoom: 1; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -webkit-border-radius: 50%; -webkit-background-clip: padding-box; -moz-border-radius: 50%; -moz-background-clip: padding; border-radius: 50%; background-clip: padding-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .bd-danger{ }
Dey-Dey

pulse effect

Dey-Dey
  Apr 10th, 21:09
1.5K Views