【CSS】ホバーしたら左からシュッとなるボタンを作る

2023年2月28日

タイトルで何を実装したいのか分かった方はいるのでしょうか。

下記のようなボタンのことを指しています。

左からしゅっ

左からシュッとしていますよね。

よく見かけるこのボタンの実装方法をご紹介していくのですが、この機能を実装する上での考え方をマスターすると、他のことにも応用できそうな知識が盛りだくさんなのでぜひご覧いただけたらと思います。

様々なCSSの知識を学ぶことができます。

こんな人におすすめ

・上記のボタンの原理を知りたい方

考え方

まずはボタンを実装していく上での考え方を、図を使ってご紹介していきます。

まずはこのようなボタンを作成します。

続いてこのボタンの左端に「幅0・高さがボタンと同じ要素」を作成します。

分かりやすいように図では幅を持たせています。

さらに、ボタンをホバーしたときに、この緑の要素の幅を「0px → ボタンと同じ幅」にするよう設定します。

このままではボタンの丸みが無くなってしまうので、ボタンの枠外を非表示にします。

これで理論上は実装することができました。

ポイントなのは、ホバーしたときに緑の要素の幅を変化させている点です。この緑の要素はCSSの擬似要素を使用して作成していきます。

それでは実際に実装していきましょう！

実装していく

実装する流れをある程度イメージができたとこで、実際にどんなプロパティを適用させていくのかを噛み砕いて解説していきます。

本記事でご紹介する方法でなきゃならないということは決してありません。あくまで選択肢の一つとしてご覧いただけたらと思います。

ボタンを作る

まずは土台となるボタンを作成しましょう。

<a href="#">
  <p>移動する</p>
</p>

a:link, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none;
}

a:hover {
  cursor: pointer;
}

a {
  position: relative;
  display: flex;
  width: 200px;
  height: 30px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: solid 2px #D90A27;
  border-radius: 15px;
}

「移動する」という文字をボタンの中心に配置するために下記のプロパティを設定しています。

a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

あえてポイントを述べるとしたらそんなもんでしょうか。

このようなボタンができます。

この時点では待てど暮らせど変化はしません。

擬似要素を追加する

続いて、擬似要素「::before」を用いて幅0pxの要素を作成していきます。

a::before {
  position: absolute;
  width: 0;
  height: 30px;
  content: '';
  background-color: #D90A27;
  left: 0;
}

::beforeのルールとして、「content」プロパティを定義しなくてはなりません。今回は空文字「”」を定義しています。

また「width: 0;」によって幅を無くしています。

さらに後でこの擬似要素が幅を持ったとしても、元のボタンの位置が変化しないように「position: absolute;」を設定しています。

これを作成しました。

上記のコードを追加した後のボタンは、見た目は特に変化ありません。

虎視眈々と幅ゼロの擬似要素が待機しています。

ホバー時の挙動を設定

ついに、ボタンにホバーした際の擬似要素の挙動を設定します。

a:hover::before {
  width: 100%;    /* ホバーしたときに幅を100%にする */
}

するとホバー時に擬似要素の幅が100%となり、ボタン全体が赤色で覆われます。

a::before:hover {}だと効かないので注意です。

現段階ですと、一瞬でボタン全体が覆われてしまいます。別にこれでもよいのですが、今回はシュッとさせたいので、ホバー時の要素の変化時間を指定してあげましょう。

a::before {
  position: absolute;
  width: 0;
  height: 30px;
  content: '';
  background-color: #D90A27;
  left: 0;
  transition-duration: .2s;  /* 追加 */
}

この「transition-duration」を設定することで、ホバー時の変化時間を制御できます。

左からシュッとさせることができました。

はみ出している部分を隠す

まだホバー時の赤塗りの形が長方形となっており、ボタンからはみ出しています。

「overflow」プロパティを使用してこれを解決します。

a {
  position: relative;
  display: flex;
  width: 200px;
  height: 30px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: solid 2px #D90A27;
  border-radius: 15px;
  overflow: hidden;  /* 追加 */
}

これで、擬似要素（子要素）が<a>タグ（親要素）からはみ出した部分を非表示にすることができます。

ボタンらしくなってきました。けど「移動する」の文字が擬似要素の下にあるので表示されていません。

重なり順を変える

「z-index」プロパティで重なり順を変更し、ホバー時に「移動する」が隠れないようにします。

p {
  z-index: 1;
}

z-indexの数値が大きいほど前面に配置されます。

ホバー時にもちゃんと文字が表示されています。

ホバー時の文字色も変える

真っ赤の背景に黒の文字は視認性が悪いので、ホバー時の文字色を白に変えていきます。

a:hover {
  color: #ffffff;  /* ホバー時に文字色を白に */
}

p {
  transition-duration: .3s;  /* 文字が白になるまでの時間を設定 */
  z-index: 1;
}

ここまでにご紹介した知識のおさらいです。

この辺の文字色や変化時間はお好きに変更してください。

完成しました！

ここまでのコードを全てまとめましたので、確認用としてご覧ください。

index.html

<a href="#">
  <p>移動する</p>
</a>

styles.css

a:link, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none;
}

a:hover {
  cursor: pointer;
}

a {
  position: relative;
  display: flex;
  width: 200px;
  height: 30px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: solid 2px #D90A27;
  border-radius: 15px;
  overflow: hidden;
  margin-top: 100px;
  margin-left: 300px;
}

a::before {
  position: absolute;
  width: 0;
  height: 30px;
  content: '';
  background-color: #D90A27;
  left: 0;
  transition-duration: .2s;
}

a:hover::before {
  width: 100%;
}

a:hover {
  color: #ffffff;
}

p {
  transition-duration: .3s;
  z-index: 1;
}