カーソルを合わせるとキャラクターがひょっこりするボタンを作る

ひぐま
ひぐま

カーソルを合わせるとキャラクターがひょっこりするボタンが可愛かったので実際にやってみたという記録です。

四方向からワンちゃんがひょこっと出てきます。↓

ボタンアニメーションデモ

概要

まずはひょっこりさせる画像を用意するところから
可愛いワンちゃんのイラストをイラストACで探してきました。

inusan01.png

ただのイラストのままでもよかったのですが、 ダウンロードしたaiデータの体パーツがしっかりと分けられていたので呼吸するアニメーションをAPNGで追加してみました。
APNGはアニメーションにしたいコマ送りの画像を用意して、無料のオンラインツールで読み込むだけで変換できますのでいいなと思ったら試してみてください。

HTML

基本的なボタンのHTMLでOKです。疑似要素を使ってひょっこりさせるので、疑似要素を使用できる装飾の範囲でシンプルに設計。

<p class="btn"><a href="#">ボタン</a></p>

CSS

ボタンの基本スタイル

.btn a{
	width:160px;
	padding:20px 20px;
	display:block;
	border:1px solid #5d3326;
	border-radius:50px;
	color:#fff;
	text-align:center;
	text-decoration:none;
	letter-spacing:0.08em;
	font-size:1.6rem;
	font-weight:500;
	background:#22a9ca;
	transition:all .2s;
	position:relative;
}
.btn a:after{
	content:"";
	width:62px;
	height:55px;
	display:block;
	transition:all .2s cubic-bezier(0.2, 1, 0.66, 1);
	vertical-align:middle;
	background:url(img/inusan-animation.png) center / 100%  no-repeat;/*ひょっこりさせるイラスト*/
	position:absolute;
	opacity:0;/*不透明度を0に*/
	z-index:-1;/*重ね順を下に*/
}
.btn a:hover{ background:#fff; color:#5d3326; }
.btn a:hover:after{ opacity:1; }

上側から

.btn a:after{
	top:0;
	left:50%;/*左右を中央寄せ*/
	transform:translateX(-50%);/*左右を中央寄せ*/
}
.btn a:hover:after{
	top:-35px;
}

左側から

.btn a:after{
	bottom:10px;
	left:-20px;
	transform:scale(0.8) rotate(25deg);/*scaleではじめは大きさを小さく、rotateで斜めからの出現*/
}
.btn a:hover:after{
	bottom:0;
	left:-35px;
	transform:scale(1) rotate(0);/*scaleを1(初期値)に戻すrotateを0(初期値)にして着地*/
}

右側から

.btn a:after{
	bottom:10px;
	right:-20px;
	transform:scale(-0.8,0.8) rotate(25deg);/*scaleではじめは大きさを小さく、前の数値負の値にすることで画像を左右反転 rotateで斜めからの出現*/
}
.btn a:hover:after{
	bottom:0;
	right:-35px;
	transform:scale(-1,1) rotate(0);/*scaleを1(初期値)に戻す、前の数値負の値にすることで画像を左右反転したまま。rotateを0(初期値)にして着地*/
}

下側から

.btn a:after{
	bottom:0;
	left:50%;/*左右を中央寄せ*/
	transform:translateX(-50%) rotate(180deg);/*translateXで中央寄せ、rotate180degで上下反転*/
}
.btn a:hover:after{
	bottom:-35px;

基本スタイル+使いたい動きのCSSをプラスして使用します。
イラストの相対位置は適宜ボタンやイラストのキャラクターに合わせて調整してあげてください。

マウスオーバー前の疑似要素(イラスト部分)は不透明度(opacity)を0にしておきます。
また、ボタンの後ろ側から飛び出すイメージなので、重ね順(z-index)は初期値の0より小さく(例では-1)してボタンより後ろにしています。

四方から出る際のアニメーションは、transitionのcubic-bezier(イージング関数)を使っています。
以下のサイトなどで確認しながら設定してみてください。
https://cubic-bezier.com/

トップへ戻るボタンに応用してもきっと可愛いですね。
なかなか機会がないので、いつか実用したいです。

関連記事