ボコって押したように動くボタンが好きな上司の話CSS

どうも、アフィリエイターです。

一人で稼げる程にはなってません。

23になったら独立したいとか言ってたのにまだまだ先の話だよ…
なんてったって、会社以外でPC触らんもん。

そんなアフィリエイターが大好きなボタンの話です。

個人的にはスマホでの閲覧数8割超えているのでホバーってもうオワコンだと思ってたんですけど、上司様はホバーでボコってなるボタン好きらしい。

と言う事で、ホバー出来るボタンの作り方メモです。

①ボタンのCSSを作成する

これはただボックス作るだけだから飛ばしまーす。

②ボタンに影を付ける

影を付けないと、ボタンを押したっていうより、下がったって感覚になっちゃうからね。

影の入れ方は単純。ボタンのボックスに一個入れるだけ

box-shadow: 0px 5px 3px #c1c1c1;

色は色、影の色

1個目のpxは　右スライド
2個目のpxは　下スライド
3個目のpxは　ぼかし

っていう感覚でいいのかな？

コレらを調整して好みの影にします。自分はあやふやがすきなのでぼかし結構入れちゃいます。

③ホバータグを挿入する

.btn :hover { 
  box-shadow: none;
  position: relative;
  top: 3px;
  background:rgb(0 63 156);
  color: #ffb647;
  transition: none;}   
  

ボタンを押した時にどんな動作をするべきかを考えながらやってく。

①影は消える
②ボタンの位置は下がる
③影の場所が変わるのでボタン全体が暗くなる

とかね。

それを元に要素として

・box-shadowをnoneにして「影を消す」
・positionで相対的に動かす
（これよくわかってないけど入れないと動作しないから入れてる）
・topに入れた影分pxをいれて「ボタンの位置を下げる」
・backgroundで「ボタン自体の色を暗くする」
・colorでついでに↑に合わせて文字色を変える

・transition　は参考サイトにあったから入れたけどよくわからない。
時間的変化だから、たぶん入れるとゆっくりになったり素早くなったり？しらん

今度調べます。

★コピペ用まとめ

↓ただの影ついたボタン

.btna a {
   display: block;
   padding: 0.5em;
   text-decoration: none;
   border-radius: 25px;
   font-weight: bold;
   width: 65%;
   margin: 0.5em auto;
   text-align: center;
   font-size: 1.3em;
   background: rgb(39 114 226);
   color: #ffffff;
   box-shadow: 0px 5px 3px #0d4aa7;
}

↓うえのボタンに対してボコッっと下がるホバー付けた

.btn :hover { 
  box-shadow: none;
  position: relative;
  top: 3px;
  background:rgb(0 63 156);
  color: #fff;
  transition: none;}

こんな感じ。

CSS分かる人ならたぶんコレみりゃ後適当に触るだろう！

最近やけにサイトのボタン装飾変える機会が多いのでそんなカンジの覚書でした。