CSSアニメーションで、存在を強調する明滅ボタンです。混みいった画面にあるボタンや、他と差別したいボタン等、存在を強調したいときに使えると思います。

「@keyframes」を使い、状態を変化させてアニメーションさせ、「animation-iteration-count」で再生をエンドレスで繰り返します。いずれのサンプルも「animation-duration: 5s;」で、再生時間を5秒にしています。

htmlソース

<div class="b-wrap">
    <button class="btn1 animation">SAMPLE1</button>
    <button class="btn2 animation">SAMPLE2</button>
    <button class="btn3 animation3">SAMPLE3</button>
 </div>
  /*---主要なbutton部分以外は省略しています---*/

SAMPLE2のCSS（主要部分）ソース

div.b-wrap button.btn2 {
	display: block;
	width:180px;
	margin: 15px auto;
	background: #FFF;
	position: relative;
	padding: 15px 0;
	border: none;
	color: #f49a25;
	font-size: 18px;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	}
div.b-wrap button.btn2 {
	background: #36d;
	border: 4px solid #fff;
	color: #f49a25;
	}
div.b-wrap button.btn2 {
	border: 3px solid #fff;
	border-radius:10px;
	}
@-webkit-keyframes pulse {
  0%	{
		transform: scale3d(1, 1, 1);
		opacity:1;
		}
  50%	{
		transform: scale3d(1.1, 1.1, 1.1);
		border-radius:30px;
		color:#36d;
		opacity:0.3;
		}
  100%	{
		transform: scale3d(1, 1, 1);
		opacity:1;
		}
	}
@keyframes pulse {
  0%	{
		transform: scale3d(1, 1, 1);
		opacity:1;
		}
  50%	{
		transform: scale3d(1.1, 1.1, 1.1);
		border-radius:30px;
		color:#36d;
		opacity:0.3;
		}
  100%	{
		transform: scale3d(1, 1, 1);
		opacity:1;
		}
	}
.animation2 {
	-webkit-animation-duration: 5s;
 	animation-duration: 5s; 
	-webkit-animation-name: pulse;
	animation-name: pulse;
	}