Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8582

【CSS】クリックボタンを押したらボタンがへこむアニメーション

$
0
0

完成形を確認

クリックボタンを押したらボタンがへこむアニメーションをつくりましょう:smile:

完成.gif

上のアニメーションのようなものを完成させましょう!:laughing:
とても簡単にできます:laughing:
・・・が、そのまえに active の説明:sweat_smile:

:active

:sunny:要素がクリックされているあいだだけ CSS が適用される

セレクタ:active {
  プロパティ: 値;
}

書き方は hover と似ていますね:smile:

例.html
<p>You!押しちゃいな</p>
例.css
p:active{background-color:red;}

クリック.gif

こんな感じでクリックすると背景が赤くなります:smile:
これを踏まえてアニメーションを作成していきましょう!:fist:

アニメーション作成

完成.gif

このアニメーションを作ろうとしたときどのようにプログラムは動いているのだろうか:thinking:

:bulb:ポイント:bulb:
 :point_up:クリックするとアニメーションが動いている
 :point_up:クリックすると影がなくなっている
 :point_up:クリックすると赤いボタン部分が下に移動している
この3点を目安に作成していこう:smile:

まずはHTML

ボタンつくるで.html
<p>You!押しちゃいな</p>

これはもう簡単:smile:
これでできあがり:smile:

ではお次はCSS:smile:

ボタンつくるで.css
p{background-color:red;box-shadow:0px10px#bfbfbf;width:150px;text-align:center;}

ボタンの色を赤にして
ボタンの下に10pxのグレーの影をつくって
幅は150pxくらいでいいかな・・・
見栄え良く文字は中央揃え:smile:

スクリーンショット 2020-01-21 3.46.19.png

はい!とりあえずボタンは完成:smile:
ここからアニメーションをつけていこう:smile:

クリックするとアニメーションが動いているので・・・:thinking:

ボタンつくるで.css
p:active{}

まずは1点目のポイントの

:point_up:クリックするとアニメーションが動いている

ということなので active を設定。

active を設定しただけなので中身はカラ。
ここになにを入れていくかというと
2点目のポイントの

:point_up:クリックすると影がなくなっている

という部分。
さっそく入力してみよう:smile:

ボタンつくるで.css
p:active{box-shadow:none;}

しゃどう.gif

影なくなりました!:laughing:
影をなくしたいときは box-shadow: none; にすれば影は消えてくれます:smile:

さて、影は消えてくれたけどまだボタンらしくない。。
これではただ影が消えただけ。
どうするのかといえば、3点目の

:point_up:クリックすると赤いボタン部分が下に移動している

を設定すればアニメーションは完成です:laughing:

p:active にさらにCSSを追加します

ボタンつくるで.css
p:active{box-shadow:none;position:relative;top:10px;}

position: relative; は 【CSS】position: absolute; と position: relative;でまとめたときに基準位置を決めることで使用しました。
でも要素の位置を変更するという使い方もできます:smile:

今回は 10px の影がなくなった分だけ下にずらしたいため
position: relative;
top: 10px;
とします。

ではアニメーションを見てみましょう:laughing:

完成.gif

ボタンを押すことができました:raised_hands:

おまけ

ezgif.com-video-to-gif.gif

さっきのコードを踏まえたうえで、よりボタンぽいものを作成しました。
コードは下記となります。

ボタンらしいボタン.html
<p>click!</p>
ボタンらしいボタン.css
p{background-color:#1e90ff;box-shadow:0px3px#000080;width:100px;text-align:center;cursor:pointer;color:white;font-size:20px;line-height:30px;border-radius:50px;}p:active{box-shadow:none;position:relative;top:3px;}

Viewing all articles
Browse latest Browse all 8582

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>