CSSの指定のみで各種エフェクトを付けて、その存在を目立たせるボタンです。

htmlソース

<h3>Transition Effects</h3>
<div class="btns">
	<button class="btn fade-in">Fade</button>
	<button class="btn grow">Grow</button>
	<button class="btn shrink">Shrink</button>
	<button class="btn tilt">Tilt</button>
	<button class="btn shake">Shake</button>
	<button class="btn bounce">Bounce</button>
	<button class="btn slide-width"><span>Slide Width</span></button>
</div>
<h3>Background Effects</h3>
<div class="btns">
	<button class="btn fade-bg">Fade</button>
	<button class="btn slide left">Slide Left</button>
	<button class="btn slide right">Slide Right</button>
	<button class="btn slide top">Slide Top</button>
	<button class="btn slide bottom">Slide Bottom</button>
</div>

CSSソース（slide-widthの場合　ベンダープレフィックスは省略しています）

.btns.btn.slide-width {
	overflow: hidden;
	animation: slide-width 3s linear 0s infinite alternate;
	}
.btns.btn.slide-width span {
	display:inline-block;
	text-align:left;
	margin-left:-5px;
	width:200px;
	}
@-webkit-keyframes slide-width {
	0% {
		width: 50px;
		}
	100% {
		width: 100px;
		}
	}