最後の仕上げに、CSS講座

P-8.押してずれるボタン ページ26

##

【画像1/リンク】


この画像、バグではなくて、ボタンを押し続けながらスクショしたんです。思ったよりずれました。

というわけで、リンクのように、タップ・クリックしたらボタンがずれるソースです。

▶ソース【𝕤𝕠𝕦𝕣𝕔𝕖】
input[type=submit]:hover,
input[type=submit]:active{
position:relative;
top:上方向へのずれ/px;
bottom:下方向へのずれ/px;
right:右方向へのずれ/px;
left:左方向へのずれ/px;
}

多分pxでなくともいける気がするけど……。
ちなみに、画像1はそれぞれ右と下で10pxずつのずれがあります。

このずれ、実は − (マイナス)をつけることもできて、例えば
top:-7px
であれば、下方向に7px分ずれて、
left:-14px
だと、右に14px分ずれます。
マイナスをつけると、反対方向にずれるとでも考えてください。bottom の値を top のマイナス値にすると、文字数を若干削れます。

書いているソースはリンクのやつと変わらないんですが、セレクターを変えるだけで、あら不思議。
ボタンが動くではありませんか！
ボタンボタン言ってるだけあって、【.add_btn】でも適応します。
input[type=submit]の部分を .add_btn に変えてください。

▶まとめ【𝕤𝕦𝕞𝕞𝕒𝕣𝕪】
ボタンをタップしたときのずれは、top:〇pxなどで適応する。

P-9.角に丸みをつける→←S-16.編集 お話を追加ボタン

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す