【ボタン集】ホバーすると押したように見えるボタン

というわけで今回はボタン集　ホバーすると押したようにみえるボタンの作成方法をご紹介します。

ホバーすると押したように見えるボタン

まずは完成品を見てみましょう！

See the Pen CSSボタン集　ホバーすると押したように見えるボタン by そす (@Sosgoyo) on CodePen.

どうでしょう？
ホバーすると、背景がなくなってボタンを押したように見えますね！
ではコードを説明していきます。

コード紹介

ではHTML、CSSをご紹介します。
HTMLは説明するとこないので割愛します！

【HTML】

<div class="container">
  <a href="" class="c-btn">
    ボタン
  </a>
</div>

【CSS】

.container {
  margin-top: 50px;
  margin-left: 50px;
}

a {
  text-decoration: none;
}

.c-btn {
  background-color: blue;
  width: 200px;
  height: 50px;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  transition: .3s;
  top: 0;
  left: 0;
  color: white;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-btn::before {
 position: absolute;
  content: "";
  width: 200px;
  height: 50px;
  background-color: skyblue;
  border-radius: 5px;
  top: 8px;
  left: 8px;
  z-index: -1;
  transition: .3s;
}

.c-btn:hover {
  top: 8px;
  left: 8px;
}

.c-btn:hover::before {
  transform: translate(-8px,-8px);
}

ボタンを構成しているのは「.c-btn」というクラスがついた要素ですね。
CSSもそこまで特別なことはしてません。背景は疑似要素で実装しております。（.c-btn::before）

ポイントとしては、

・疑似要素はボタンと同じサイズ・形にする
・ボタン要素には「top:0; left:0;」を指定する
・z-indexで疑似要素をボタンの前後関係をしっかりする
・transitionの設定をする

こんな感じでしょうか。

あとはホバーアクションの設定です。

ホバーアクション

続いてホバーアクションの設定です。

.c-btn:hover {
  top: 8px;
  left: 8px;
}

.c-btn:hover::before {
  transform: translate(-8px,-8px);
}

設定したアクションは2つ。ボタンをホバーすると、

・ボタン要素を「top: 8px; left: 8px;」ずらす
・疑似要素を「transform: translate(-8px,-8px);」

これを設定しないとボタンが押されたようなアクションになりません。
気になる方は、是非試してみてください。

では最後にもう一度完成品を↓

See the Pen CSSボタン集　ホバーすると押したように見えるボタン by そす (@Sosgoyo) on CodePen.

まとめ

というわけで今回は、ホバーすると押したように見えるボタンの作成方法についてご紹介しました！
今後もいろいろなボタン作成方法をご紹介します！おたのしみに♪