【コピペでOK】CSSのみで作る矢印ボタン(アニメーションあり)

今回はコピペしてすぐに使える、
CSSのみで作る「＞」のような矢印ボタンをご紹介します。

矢印がつくことによって、ボタンだということがよりわかりやすくなりますね。

応用編としてマウスオーバーで矢印が動くアニメーションの設定もあわせてご紹介します。

【コピペでOK】CSSで作る矢印ボタン

このようなコードで、矢印を表現しています。

ポイントとしては.btn:afterに記述してあるこちらの部分です。

上と右に線を引き、45度回転させることで表現しています。

【応用編】矢印がマウスオーバーで動くアニメーション

See the Pen
矢印が動くボタン by デザイナー・エンジニアでフリーランスを目指すならdainamo（ダイナモ） (@dainamo_jp)
on CodePen.

先ほどのコードにこちらのCSSを追加することによって矢印のアニメーションを表現しています。

ボタンの矢印の配置設定を right:5%;から:hoverのときにはright:3%;に変更する。

という表現で2%分右に移動しています。

さりげないアニメーションではありますが、ボタンであることがより一層わかりやすくなるかと思います。

さりげないアニメーションだからこと色々な場所で使うことができる技です。

まとめ

マウスオーバー時にボタンの背景色を変えたい場合などは

こちらに背景の色を指定してあげるとマウスオーバー時の色を変更することができます。

こちらではopacity:.75;と半透明にするエフェクトをかけています。

色々と応用が効く技なので、色々な場所でご活用ください。