フラットやゴーストといったようにシンプルで一見ボタンと認識しずらい感じのボタンデザインを使う場合、それが少しでもボタンだと分かるように矢印等のアイコンを付けることが多いと思います。
今回はそんな矢印付きボタンを実装する際、ホバー時に矢印にちょっとしたアニメーションエフェクトを実装したサンプルで、いずれも実装にはCSSのみを使用しています。

サンプルの記述内容について

CSSで記述している内容はこのサンプルの見た目に関する記述も多いので、矢印の動きのみ抜き出したい場合はボタンとなる要素にposition: relative;を追記し、::before, ::afterで記述している内容や:hoverで記述している部分を使ってもらえれば同じ動きを再現できるかと思います。

また、紹介しているボタンに付いている矢印アイコンは、いずれもCSSのborderを使って実装をしています。
サイトによっては同じようにCSSを使っていても違う方法で実装したりアイコンフォントや画像などを利用していることもあると思うので、その場合は擬似要素に記述している内容を変更してもらえれば任意のアイコンで実装できると思います。

  • 閲覧の際にChromeまたはFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。

カラー変更

単純に白い矢印をホバー時に黒にカラー変更する動きにtransitionを付けたもので、このサンプルでは矢印だけでなく背景色や文字色も変更するようになっています。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.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;
}
.button:hover::after {
  border-left-color: #333;
}

右に少しずらす

ホバー時に矢印が少し右にずらす(移動する)エフェクトで、実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.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;
}

一瞬右にずらす

同じくホバー時に矢印を右にずらすものですが、ホバー中にずっと右にずれたままでなく、すぐ元の位置に戻るエフェクトです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.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;
  }
}

右に消えていきつつ、左から出現させる

ホバー時に矢印が右の方へ移動しながら消えつつ、左から同じく矢印が移動しながら出現するエフェクトです。
これはもう少しシンプルに上手くできそうな気もしているんですが、ここでは::before::afterのふたつの擬似要素を使って実装しており、HTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.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;
  }
}

表示・非表示をアニメーションさせる

こちらはホバーしている間は矢印が左から出現して右に消えていくというアニメーションがリピートされるタイプのものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.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;
  }
}

矢印を縦回転

ホバーすると矢印がくるくるっと縦回転するエフェクトです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.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);
  }
}

矢印を非表示にして、テキストをセンターに

こちらはこれまでのもと違い、テキストがアイコンの表示領域も含めたセンター寄せの場合のボタンになります。
ホバーすると矢印が移動しながら消えていき、テキストがセンターに移動するといったもので、実装にはHTMLとCSSをそれぞれ下記のように記述します。

.button:hover spanに記述するpaddingの値は、デフォルト(ホバー前)で指定しているpadding-rightの値を左右に振り分けるという感じです。

<a class="button" href="#"><span>Button</span></a>
.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;
}

ここではいずれもアイコンの動きを紹介してきましたが、ボタン全体の見た目やホバー時のエフェクトに関しては以下のようなエントリーでまとめているので、興味ある方はこちらもご覧ください。