【CSS】ぷるぷる動くボタンなど、コピペで使えるアニメーションボタン10種類

つい押したくなるシンプルなアニメーションボタンを10種類紹介します。
コピペで簡単に実装可能。

押したくなるボタンはどれ？

まずは基本のボタンのソースコード

ただのボタン

box-shadowで影を落としたシンプルなボタンです。
文字の前の[icon name="play-circle" class="" unprefixed_class=""]マークは「Font Awesome」のアイコンフォントを使用しています。

HTMLコード

<a href="リンク先のURL"><span class="button-simple">ただのボタン</span></a>

CSSコード

.button-simple {
	position: relative;
	font-weight: bold;
	padding: 5px 15px;
	margin: 0px 5px;
	border-radius: 30px;/*角の丸み*/
	font-size: 18px;/*文字サイズ*/
	background-color: #00a41a;/*背景色*/
	color: #fff;/*文字色*/
	display: inline-block;
	text-shadow: 1px 1px 0px rgb(0, 0, 0, 0.3);
	box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
.button-simple:before {
	font-family: FontAwesome;
	content: 'f144';/*好きなアイコン*/
	color: #eeee22;/*アイコンの色*/
	margin-right: 3px;
}
a:hover .button-simple {
	background-color: #cc0000;/*触れたときの背景色*/
	color: #fff;/*触れたときの文字色*/
	box-shadow: 0 0px 0 rgb(0, 0, 0, 0.3);
	animation-play-state: paused;
	top: 3px;
}

このボタンに、好きな動きを加えていきます。

「Font Awesome」の導入方法については、下記のサイトが参考になります。

サルワカ | サルでも分かる図解説明マガジン

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

ぷるぷる動くボタン①

ソースコードを見る

HTMLコード

<a href="リンク先のURL"><span class="button-simple purupuru">ぷるぷる動くボタン①</span></a>

要素にclass"purupuru"を入れれば、ボタン以外の画像や文字なども同じように動きます。

CSSコード（動き部分のみ）

.purupuru {
	animation: purupuru 0.1s infinite;
}
@keyframes purupuru {
	0% {
		transform: translate(0px, 0px)
	}
	50% {
		transform: translate(0px, 1px) rotateZ(1deg)
	}
}

ぷるぷる動くボタン②

ソースコードを見る

HTMLコード

<a href="リンク先のURL"><span class="button-simple purupuru2">ぷるぷる動くボタン②</span></a>

要素にclass"purupuru2"を入れれば、ボタン以外の画像や文字なども同じように動きます。

CSSコード（動き部分のみ）

.purupuru2 {
	animation: purupuru2 0.1s infinite;
}
@keyframes purupuru2 {
	0% {
		transform: scale(1, 1);
	}
	50% {
		transform: scale(0.98, 0.95)
	}
}

上下に揺れるボタン

ソースコードを見る

HTMLコード

<a href="リンク先のURL"><span class="button-simple yureru-j">上下に揺れるボタン②</span></a>

要素にclass"yureru-j"を入れれば、ボタン以外の画像や文字なども同じように動きます。

CSSコード（動き部分のみ）

.yureru-j {
	animation: yureru-j 2s infinite;
}
@keyframes yureru-j {
	0% {
		transform: translate(0px, 2px);
	}
	5% {
		transform: translate(0px, -2px);
	}
	10% {
		transform: translate(0px, 2px);
	}
	15% {
		transform: translate(0px, -2px);
	}
	20% {
		transform: translate(0px, 2px);
	}
	25% {
		transform: translate(0px, -2px);
	}
	30% {
		transform: translate(0px, 0px);
	}
}

左右に揺れるボタン

ソースコードを見る

HTMLコード

<a href="リンク先のURL"><span class="button-simple yureru-s">左右に揺れるボタン②</span></a>

要素にclass"yureru-s"を入れれば、ボタン以外の画像や文字なども同じように動きます。

CSSコード（動き部分のみ）

.yureru-s {
	animation: yureru-s 2s infinite;
}
@keyframes yureru-s {
	0% {
		transform: translate(2px, 0px);
	}
	5% {
		transform: translate(-2px, 0px);
	}
	10% {
		transform: translate(2px, 0px);
	}
	15% {
		transform: translate(-2px, 0px);
	}
	20% {
		transform: translate(2px, 0px);
	}
	25% {
		transform: translate(-2px, 0px);
	}
	30% {
		transform: translate(0px, 0px);
	}
}

上下左右に揺れるボタン

ソースコードを見る

HTMLコード

<a href="リンク先のURL"><span class="button-simple yureru-js">上下左右に揺れるボタン②</span></a>

要素にclass"yureru-js"を入れれば、ボタン以外の画像や文字なども同じように動きます。

CSSコード（動き部分のみ）

.yureru-js {
	animation: yureru-js 0.4s infinite;
}
@keyframes yureru-js {
	0% {
		transform: translate(1px, 1px);
	}
	25% {
		transform: translate(1px, -1px);
	}
	50% {
		transform: translate(-1px, -1px);
	}
	75% {
		transform: translate(-1px, 1px);
	}
	100% {
		transform: translate(1px, 1px);
	}
}

もっちり動くボタン

ソースコードを見る

HTMLコード

<a href="リンク先のURL"><span class="button-simple mocchiri">もっちり動くボタン②</span></a>

要素にclass"mocchiri"を入れれば、ボタン以外の画像や文字なども同じように動きます。

CSSコード（動き部分のみ）

.mocchiri {
	animation: mocchiri 3s infinite;
}
@keyframes mocchiri {
	0% {
		transform: scale(1, 0.8);
	}
	20% {
		transform: scale(0.8, 1.1);
	}
	95% {
		transform: scale(1, 1);
	}
	100% {
		transform: scale(1, 0.8);
	}
}

ぺこぺこ凹むボタン

ソースコードを見る

HTMLコード

<a href="リンク先のURL"><span class="button-simple pekopeko">ぺこぺこ凹むボタン②</span></a>

これはボタンに使用する前提で作ったので、他の要素に適応させると微妙。

CSSコード（動き部分のみ）

.pekopeko {
	animation: pekopeko 2s infinite;
	box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
@keyframes pekopeko {
	0% {
		box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
		top: 0px;
	}
	10% {
		box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
		top: 3px;
	}
	20% {
		box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
		top: 0px;
	}
	30% {
		box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
		top: 3px;
	}
	40% {
		box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
		top: 0px;
	}
}

ぱつんと跳ねるボタン

ソースコードを見る

HTMLコード

<a href="リンク先のURL"><span class="button-simple patsun">ぱつんと跳ねるボタン②</span></a>

要素にclass"patsun"を入れれば、ボタン以外の画像や文字なども同じように動きます。

CSSコード（動き部分のみ）

.patsun {
	animation: patsun 2s infinite;
}
@keyframes patsun {
	0% {
		transform: rotateZ(0deg);
	}
	22% {
		transform: rotateZ(0deg);
	}
	24% {
		transform: translate(-2px, -10px) rotateZ(-18deg) scale(0.8, 1.3);
	}
	26% {
		transform: rotateZ(0deg) scale(1, 1.1);
	}
	28% {
		transform: translate(0px, -2px) rotateZ(-2deg;
		)
	}
	30% {
		transform: rotateZ(0deg);
	}
	32% {
		transform: translate(0px, -2px) rotateZ(-2deg);
	}
	33% {
		transform: rotateZ(0deg);
	}
	34% {
		transform: translate(0px, -2px) rotateZ(-2deg);
	}
	35% {
		transform: rotateZ(0deg);
	}
	36% {
		transform: translate(0px, -2px) rotateZ(-2deg);
	}
	37% {
		transform: rotateZ(0deg);
	}
	38% {
		transform: translate(0px, -2px) rotateZ(-2deg);
	}
	39% {
		transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(0deg);
	}
}

ぶるりと震えるボタン

ソースコードを見る

HTMLコード

<a href="リンク先のURL"><span class="button-simple bururi">ぶるりと震えるボタン②</span></a>

要素にclass"bururi"を入れれば、ボタン以外の画像や文字なども同じように動きます。

CSSコード（動き部分のみ）

.bururi {
	animation: bururi 1s infinite;
}
@keyframes bururi {
	50% {
		transform: scale(1, 1);
	}
	52% {
		transform: scale(0.98, 0.95)
	}
	54% {
		transform: scale(1, 1);
	}
	56% {
		transform: scale(0.98, 0.95)
	}
	58% {
		transform: scale(1, 1);
	}
	60% {
		transform: scale(0.98, 0.95)
	}
}

ドキドキしてるボタン

ソースコードを見る

HTMLコード

<a href="リンク先のURL"><span class="button-simple dokidoki">ドキドキしてるボタン②</span></a>

要素にclass"dokidoki"を入れれば、ボタン以外の画像や文字なども同じように動きます。

CSSコード（動き部分のみ）

.dokidoki {
	animation: dokidoki 1.5s infinite;
}
@keyframes dokidoki {
	0% {
		transform: scale(1.05)
	}
	5% {
		transform: scale(1)
	}
	95% {
		transform: scale(1)
	}
	100% {
		-webkit-transform: scale(1.05)
	}
}