未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

【CSS】横から背景色がスライドするボタンの作り方

本記事では、CSSで横から背景色がスライドするボタンの作り方について画像を使って分かりやすく解説しています。

HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座

参考書が苦手な人はUdemyの動画がおすすめ
ちゃんと学ぶ、HTML+CSS&JavaScript入門講座

作成者たにぐち まこと
学習時間9時間
受講者数42,075人
レビュー (8,925件)

完成形

まずは横から背景色がスライドしてくるボタンの完成形を確認しましょう。

準備(サンプルコード)

以降の見出しでは、下記のサンプルコードを用いて解説しています。自分のパソコンで実行結果を確認したい人や別の数値で検証してみたい人はコピペして使ってください。

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="container">
      <button id="btn">ボタン</button>
    </div>
  </body>
</html>
style.css
#container {
  text-align: center;
  margin-top: 100px;
}

#btn {
  padding: 20px 80px;
  background: #fff;
  border:1px solid #000;
}
サンプルコード表示結果
サンプルコード表示結果

【実装】ボタンを作成する手順

擬似要素を使ってボタンと同じサイズの背景色を作る

まず始めに擬似要素(before,after)を使ってスライドさせるための背景色を作成します。下記のコードをサンプルコードに追記して表示を確認してみましょう。

/* style.cssに追記 */
#btn {
  position: relative;
  z-index:1;
}

#btn:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f00; /* スライドさせたい背景色 */
  z-index:-1;
}
擬似要素の表示結果
擬似要素の表示結果

ボタンと同じサイズで背景色が表示されているのが確認できます。追記したコードの内容について見ていきましょう。

まず始めに親要素に新規でposition:relativeを追記します。これは擬似要素(背景色)の配置を移動させるためです。

続いて擬似要素には、幅100%と高さ100%を指定しスライドさせたい背景色を設定します。後は、position:absoluteで位置をボタン要素ピッタリに重ねるためtop:0,left:0を指定します。

擬似要素の位置をずらす

先ほど擬似要素で作成した背景色をボタンの外側に配置します。下記のコードをサンプルコードに追記して表示を確認してみましょう。

/* style.cssに追記 */
#btn:before {
  transform: translateX(-100%); /* 左側からスライドさせる場合 */
  transform: translateX(100%); /* 右側からスライドさせる場合 */
}
擬似要素をずらした表示結果
擬似要素をずらした表示結果

背景色の位置がボタンの隣に移動していることが確認できます。追記したコードの内容について見ていきましょう。

transform: translateX(-100% or 100%);を設定すると、指定した要素をX軸に幅100%分ずらすことができます。

これだと背景色が見えて不恰好なので、見えないようにしましょう。

/* style.cssに追記 */
#btn {
  overflow: hidden;
}
overflow:hiddenの表示結果
overflow:hiddenの表示結果
ボタンがホバーした時に擬似要素の位置を戻す

最後にボタンをホバーした時に背景色を横からスライドさせるようにします。下記のコードをサンプルコードに追記して表示を確認してみましょう。

#btn:before {
  transition: transform 0.5s;
}
#btn:hover::before {
  transform: translateX(0);
}

ホバーした時にtransform: translateX(0);を設定することで、元々100%分ずれていた数値を元の位置に戻すことができます。また擬似要素に対して、transition:transform 0.5s;を設定することで0.5秒間かけて元の位置に戻るアニメーションになります。

まとめ

今回はCSSで横から背景色がスライドするボタンの作り方について解説しました。

一見難しそうに見えるアニメーションも一つずつ処理を分けて考えることで、簡単に実装することができます。近年のWeb開発ではアニメーションは当たり前になってきているので、様々なアニメーションを作れるように頑張りましょう!