マウスを合わせると色が変わるボタン、それだけで充分なんですが、少し工夫をするだけで一気にホームページがオシャレになります。
スタイルシートだけででてきているので、一度作ってしまえば使いまわせて簡単。
ぜひ、あなたのホームページでも使ってみてくださいね。

左から右へ光るアニメーションをするボタン

実際の動作はこんな感じ。
マウスを合わせると左から右に向かって光ります。

See the Pen
yLMXKae by Yoshimune (@hachidaime)
on CodePen.

ソースコードをそのままコピーして使ってもらったらいいんですが、少しだけ解説しておきますね。

ボタンを構成する要素は、

・ボタンの部分（<a>）
・テキストの部分（<span>）
・そして色が変わるように見せるための疑似要素（:before）

この3つからできています。

まずはアニメーション以外の部分。

.button_ltor {
  position: relative;
  top: 0;
  left: 0;
  background: #67c3bb;
  border-radius: 2em;
  padding: 5px 20px;
  min-width: 200px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
}
.button_ltor span {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  z-index: 1;
}

後で疑似要素を設定するため、配置に関するpositionの指定があったりしますが、基本的にはただのボタンなので簡単です。
基本的には色をつけてボタンのサイズを調整しているという感じです。
ボタンのデザインを変えたい場合はここで自由に変えてみましょう。

ここからはアニメーション。
疑似要素を、マウスを合わせたときに動かしています。
マウスを合わせる前は幅が0pxの要素、マウスを合わせると幅が100%になります。

.button_ltor:before {
  content: "";
  width: 0%;
  height: 100%;
  background: #8ae2db;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.2s;
}
.button_ltor:hover:before {
  width: 100%;
}

シンプルとはいえませんが、内容自体はそんなに難しくはなかったと思います。
毎回コードを書くのは面倒なので、CSSをコピーして使ってください。

こういったちょっとした工夫がホームページをよく見せます。
良いホームページは会社のイメージにもつながるので、うまく活用しましょうね。