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

2022年5月21日2023年7月9日

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

HTML/CSSの学習におすすめ書籍

1冊ですべて身につくHTML&CSSとWebデザイン入門講座

総合評価

( 5 )

メリット

HTMLとCSSの基本が体系的に学べる
Webデザインの基本が学べる
1つのWebサイトを作りながら学べる

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]

楽天ブックス

¥2,486 （2024/11/25 15:04時点 | 楽天市場調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

＼ポイント5%還元！／

Yahoo!ショッピングで探す

ポチップ

先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！

Amazon Kindle Unlimited

全プログラマー必見！
変数名/関数名にもう悩まない！

リーダブルコード

総合評価

( 5 )

メリット

美しいコードが書けるが自然と書けるようになる
他の開発者が理解しやすいコードになる

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤功平, 翻訳:角征典

¥2,640 （2023/07/23 02:48時点 | Amazon調べ）

Amazonで探す

＼楽天ポイント5倍セール！／

楽天市場で探す

＼ポイント5%還元！／

Yahoo!ショッピングで探す

ポチップ

完成形

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

準備(サンプルコード)

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

<!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>

#container {
  text-align: center;
  margin-top: 100px;
}

#btn {
  padding: 20px 80px;
  background: #fff;
  border:1px solid #000;
}

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

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

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

#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を指定します。

STEP.2 擬似要素の位置をずらす

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

#btn:before {
  transform: translateX(-100%); /* 左側からスライドさせる場合 */
  transform: translateX(100%); /* 右側からスライドさせる場合 */
}

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

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

これだと背景色が見えて不恰好なので、overflowプロパティを使ってはみ出している擬似要素を見えないようにしましょう。

#btn {
  overflow: hidden;
}

STEP.3 ボタンがホバーした時に擬似要素の位置を戻す

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

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

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

まとめ

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

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

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！