こんにちは。
未来電子テクノロジーでインターンをしているueken0403です。
今回はサイトなどで、申し込む際に使うボタンを作る方法を説明していきます。
ただボタンを設定するのではなく、カーソルを上に持っていったらカーソルの形が変わったり、クリックするとボタンが押し込まれたように見えるようにプログラミングできたら楽しいですよね。
僕はプログラミング初心者です。
そのため、この記事にも間違っている部分が含まれる可能性が高いです。
間違いを指摘されたれすぐに修正しますので、どんどん指摘してください！
基本的なボタンの作り方
いろいろな工夫をする前に、まずは基本的なボタンを作りましょう。
ボタンは＜a＞タグで指定します。
この時、初期の＜a＞タグはインライン要素になっているため、displayプロパティでインラインブロック要素に変換しておきましょう。
ついでに角を丸めておきましょう。
ボタンの角を丸めるには、border-radiusプロパティを使います。
border-radius:10px;のように指定します。
数字が大きいほど過度の丸みは大きくなります。
カーソルが乗ったときに変化するようにしよう
続いて、ボタンにカーソルを乗せる前と乗せた時で変化を作る方法を説明します。
カーソルが乗った状態をhoverといいます。
CSSでセレクタhoverとすると、カーソルが乗った時だけのCSSを設定できます。
例えば、div:hoverのCSSをbackground-color:blue; という風にすると、カーソルを乗せた時だけ背景の色が青になるようになります。
ボタンを立体的にしよう
ここからは、ボタンをよりリアルに、立体的にしていく作業に入ります。
まずは、box-shadowプロパティをつかい、ボタンに影を作ります。
また、セレクタactiveを使用すると、ボタンをクリックしている時だけ変わるCSSを設定することができます。
さらにposition: relative;を使用します。
この三つを組み合わせ、ボタンをクリックしたときに、影が消え、ボタンがその影の分だけ下にさがるようにします。
こうすることで、ボタンが押し込まれたように見えます。
具体的には、activeセレクタを使いbox-shadow:none;でクリックしたときに影が消えるようにします。
次に、position: relative;で影の大きさの分だけボタンを下に移動させます。
まとめ
今回は、HTMLとCSSで立体的なボタンを創る方法を説明しました。
簡単に少しリアルな動きを作れるところがプログラミングの面白いところですね。