スポンサーリンク

ボタンクリック時に動きをつける方法を紹介【HTML・CSS】

この記事では、CSSでボタンに動きをつける方法をまとめています(備忘録です)。

こんにちは、すっちー(@succhi104)です。

「[やりたいことが多い人へ]何のスキルもない私が成長するまでの計画を立てる」「人生の方向を見定めます!|すっちーの人生でやりたい100のリスト」の記事でWeb制作のお仕事をやるという目標を立てているのですが、せっかくなので学んだことをアウトプットしていこうと思います。

学習はProgateの有料会員プランでHTML・CSSの勉強をしています。

有料会員は月額980円ですべてのレッスンを受けることができますよ〜┌|*∵|┘

今回はそんなレッスンの中で「ボタンクリック時に動きをつける方法」を学習したのですが、どうにも苦手?すぐに忘れてしまいそうだったので備忘録的にまとめておきます。

ボタンクリック時に動きをつける方法まとめ

考え方は以下の手順になります。

  1. activeを使うことで、要素がクリックされている間だけCSSを適用することができる
  2. box-shadow: noneでボタンの影を消すことができる
  3. position: relativeとtopで要素の位置をズラす

positionの「abusolute」と「relative」の使い分けは以下の通りになっています。

MEMO
「absolute」は移動の際の基準がウィンドウか親要素になる

「relative」は移動の際の基準が元いた場所になる

図解すると以下のような感じになる(はず)。

以上の知識を用いてボタンを作成すると以下のように書けます!

ボタンをspanタグで作成します┌|∵|┘

HTML
<span class="btn message">ここをクリック!</span>

CSSでデザインを作ります┌|∵|┘

CSS

.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
}

.btn:hover {
  opacity: 1;
}

.message {
  background-color: #5dca88;
  padding: 15px 40px;
  cursor: pointer;
  box-shadow: 0 7px #1a7940;
}

最後にCSSで動きをつけます┌|∵|┘

CSS
.message:active {
  box-shadow: none;
  position: relative;
  top: 7px;
}

positionをrelativeにして、topの位置を7px下にズラす感じですね。

できたボタンはこんな感じです┌|∵|┘

ここをクリック!

 

すっちー

Wordpressにもボタンを設置することができました〜!

おわりに:ボタンクリック時に動きをつける方法まとめ

CSSでボタンに動きをつける方法をまとめていきました。

備忘録的な内容のため、目新しいことは何もなかったとは思いますが少しでも参考になっていれば幸いです。

個人的にpositionの「abusolute」と「relative」や、paddingやmarginの使い所がまだあやふやななので、随時まとめていきたいなーと思っております。

これを読んでいるあなたが私と同じようにHTML・CSSの勉強中であるのなら一緒に勉強を頑張りましょう!

すっちー

私は2月までにProgateのHTML・CSSを終わらせて、模写コーディングを始めたいと思っています!

最後まで読んでいただきありがとうございました!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください