はじめに
こんにちは。
未来電子テクノロジーでインターンをしているshinoです。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。
今回は、ボタンの付け方と、ボタンにエフェクトを付ける方法をご紹介します。
ボタンの付け方
ボタンはaタグで指定します。
ここではbtnというクラスを与えます。
HTML
<a class="btn"></a>
aタグはインライン要素であり、width や height を指定できません。
これではボタンのデザインを形作る際に不便です。
そこで、aタグをインラインブロック要素に変更します。
インライン要素やブロック要素を指定する際は、displayプロパティを使用します。
CSS
.btn {
padding :8px 24px;
color :white;
display: inline-block;
opacity : 0.8;
これでボタンをインラインブロック要素にできました。
ボタンにエフェクトを付ける
ボタンの上にカーソルをのせたとき、色を変化させることができます。
その際は、hoverを用います。
CSS
.btn :hover {
opacity : 1;
}
この場合、カーソルを持って行くとボタンの色が濃くなります。
hoverはカーソルを乗せたボタンの状態を指定すると考えるとよいです。