フラットやゴーストといったようにシンプルで一見ボタンと認識しづらい感じのボタンデザインを使う場合、それが少しでもボタンだと分かるように矢印等のアイコンを付けることが多いと思います。今回はそんな矢印付きボタンを実装する際、ホバー時に矢印にちょっとしたアニメーションエフェクトを実装したサンプルで、いずれも実装にはCSSのみを使用しています。
サンプルと記述内容について
CSSで記述している内容はこのサンプルの見た目に関する記述も多いので、矢印の動きのみ抜き出したい場合はボタンとなる要素にposition: relative;を追記し、::after（一部::beforeも）で記述している内容や:hoverで記述しているものを使ってもらえれば同じ動きを再現できるかと思います。
また、以下で紹介しているボタンに付いている矢印アイコンは、いずれもCSSのborderを使って実装をしています。
サイトによっては同じようにCSSを使っていても違う方法で実装したり、あとはアイコンフォントや画像などを利用するということもあると思うので、その場合は擬似要素に記述している内容を変更してもらえれば任意のアイコンで実装できると思います。
※閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。
※以下で紹介しているサンプルソースは全てプレフィックスを省いた状態となっていますので、必要であれば各自で追記してください。
CSSで実装する矢印アイコン付きボタンのアニメーションエフェクト 目次
1. カラー変更
単純に白い矢印をホバー時に黒にカラー変更する動きにtransitionを付けたもので、このサンプルでは矢印だけでなく背景色や文字色も変更するようになっています。
実装にはHTMLとCSSをそれぞれ以下のように記述します。
HTML
<a class="button" href="#">Button</a>CSS
.button {
position: relative;
display: inline-block;
padding: .9em 4em;
background-color: #333;
border: 2px solid #333;
color: #fff;
text-align: center;
text-decoration: none;
transition: all .3s;
}
.button::after {
position: absolute;
top: 50%;
right: .2em;
content: '';
margin-top: -5px;
border: 7px solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-left-color: #fff;
transition: all .3s;
}
.button:hover {
background-color: #fff;
color: #333;
}
.post-contents .button01:hover::after {
border-left-color: #333;
}2. 右に少しずらす
ホバー時に矢印が少し右にずらす（移動する）エフェクトで、実装にはHTMLとCSSをそれぞれ以下のように記述します。
HTML
<a class="button" href="#">Button</a>CSS
.button {
position: relative;
display: inline-block;
padding: .9em 4em;
background-color: #333;
border: 2px solid #333;
color: #fff;
text-align: center;
text-decoration: none;
}
.button::after {
position: absolute;
top: 50%;
right: .2em;
content: '';
margin-top: -5px;
border: 7px solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-left-color: #fff;
transition: all .2s;
}
.button:hover::after {
right: -.05em;
}3. 一瞬右にずらす
同じくホバー時に矢印を右にずらすものですが、ホバー中にずっと右にずれたままでなく、すぐ元の位置に戻るというエフェクトです。
実装にはHTMLとCSSをそれぞれ以下のように記述します。
HTML
<a class="button" href="#">Button</a>CSS
.button {
position: relative;
display: inline-block;
padding: .9em 4em;
background-color: #333;
border: 2px solid #333;
color: #fff;
text-align: center;
text-decoration: none;
}
.button::after {
position: absolute;
top: 50%;
right: .2em;
content: '';
margin-top: -5px;
border: 7px solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-left-color: #fff;
}
.button:hover::after {
animation: arrow .4s;
}
@keyframes arrow {
50% {
right: -.05em;
}
100% {
right: .2em;
}
}4. 右に消えていきつつ、左から出現させる
ホバー時に矢印が右の方へ移動しながら消えつつ、左から同じく矢印が移動しながら出現するというエフェクトです。
これはもう少しシンプルに上手くできそうな気もしているんですが、ここでは::beforeと::afterのふたつの擬似要素を使って実装しており、HTMLとCSSをそれぞれ以下のように記述します。
HTML
<a class="button" href="#">Button</a>CSS
.button {
position: relative;
display: inline-block;
padding: .9em 4em;
background-color: #333;
border: 2px solid #333;
color: #fff;
text-align: center;
text-decoration: none;
}
.button::before,
.button::after {
position: absolute;
top: 50%;
right: .2em;
content: '';
margin-top: -5px;
border: 7px solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-left-color: #fff;
}
.button::after {
opacity: 0;
right: 1em;
}
.button:hover::before {
animation: arrowbefore .5s;
}
.button:hover::after {
animation: arrowafter .5s;
}
@keyframes arrowbefore {
100% {
right: -.4em;
opacity: 0;
}
}
@keyframes arrowafter {
99% {
right: .2em;
opacity: 1;
}
100% {
opacity: 0;
}
}5. 表示・非表示をアニメーションさせる
こちらはホバーしている間は矢印が左から出現して右に消えていくというアニメーションがリピートされるタイプのものです。
実装にはHTMLとCSSをそれぞれ以下のように記述します。
HTML
<a class="button" href="#">Button</a>CSS
.button {
position: relative;
display: inline-block;
padding: .9em 4em;
background-color: #333;
border: 2px solid #333;
color: #fff;
text-align: center;
text-decoration: none;
}
.button::after {
position: absolute;
top: 50%;
right: .8em;
content: '';
margin-top: -5px;
border: 7px solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-left-color: #fff;
opacity: 0;
}
.button:hover::after {
animation: arrow 1.2s infinite;
}
@keyframes arrow {
50% {
right: .2em;
opacity: 1;
}
100% {
right: -.4em;
opacity: 0;
}
}6. 矢印を縦回転
ホバーすると矢印がくるくるっと縦回転するエフェクトです。
実装にはHTMLとCSSをそれぞれ以下のように記述します。
HTML
<a class="button" href="#">Button</a>CSS
.button {
position: relative;
display: inline-block;
padding: .9em 4em;
background-color: #333;
border: 2px solid #333;
color: #fff;
text-align: center;
text-decoration: none;
}
.button::after {
position: absolute;
top: 50%;
right: .2em;
content: '';
margin-top: -5px;
border: 7px solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-left-color: #fff;
transition: all .5s;
}
.button:hover::after {
animation: arrow .5s;
}
@keyframes arrow {
100% {
transform: rotateX(360deg);
}
}7. 矢印を非表示にして、テキストをセンターに
こちらはこれまでのもと違い、テキストがアイコンの表示領域も含めたセンター寄せの場合のボタンになります。
ホバーすると矢印が移動しながら消えていき、テキストがセンターに移動するといったもので、実装にはHTMLとCSSをそれぞれ以下のように記述します。
.button:hover spanに記述するpaddingの値は、デフォルト（ホバー前）で指定しているpadding-rightの値を左右に振り分けるという感じです。
HTML
<a class="button" href="#"><span>Button</span></a>CSS
.button {
display: inline-block;
padding: .9em 3.5em;
background-color: #333;
border: 2px solid #333;
color: #fff;
text-align: center;
text-decoration: none;
}
.button span {
position: relative;
padding-right: 1em;
transition: all .3s;
}
.button span::after {
position: absolute;
top: 50%;
right: -7px;
content: '';
margin-top: -5px;
border: 7px solid transparent;
border-top-width: 5px;
border-bottom-width: 5px;
border-left-color: #fff;
transition: all .3s;
}
.button:hover span {
padding: 0 .5em;
}
.button:hover span::after {
right: 0;
opacity: 0;
}以上、CSSで実装する矢印アイコン付きボタンのアニメーションエフェクトのサンプルでした。
正直このような細かい部分まで毎回やってるというわけではないんですが、逆にとにかくこういった細かいところもこだわりたいという場合は、CSSだけでもこんな感じのエフェクトをつけることもできるので是非やってみてください。
また、今回紹介したもの以外で何か面白いエフェクトとかあれば是非教えてください :)
ここではアイコンの動きを紹介してきましたが、ボタン全体の見た目やホバー時のエフェクトに関しては以下のようなエントリーでまとめているので、興味ある方はこちらもご覧ください。