webサイトを作っていると、マウスを乗せた時に指のマークになるボタンを見かけたことはありませんか？
今回は、初心者の方でも超カンタンにできる！指のマークになるボタンの作り方を、優しく解説します！
基本のボタン
まずはhtmlで基本のボタンを作ります
今回は <button> にclass名をつけて解説します
・classについての解説はこちら→HTMLのclassの使い方！を分かりやすく解説！
class名は “glow-button” とつけました
web表示させるとこんな感じ。
CSSでデザイン
今回も内部CSSを使ってデザインします
・内部CSSの解説はこちら→超初心者向け！<style>タグを使ったCSSの書き方とは？
それでは、<title> タグの下にCSSコードを書いていきましょう！
まずは、<style> タグを入力します
style の開始タグと閉じタグが表示されます
開始タグと閉じタグの間にカーソルを入れてリタンキーで改行します
ドット . の後ろにclass名である glow-button と { } を入力します。 { } の間にカーソルを入れリタンキーで改行します。
ボタンの色を変える
ba と入力すると、どれですか？メニューが表示されるので、 background-color を選択します
green （グリーン）を選択します
更新してweb表示させると、緑色のボタンが表示されました。
文字の色を変える
co と入力し、どれですか？メニューから color を選択します
w と入力し、どれですか？メニューから white を選択します
更新してweb表示させると 黒色の文字が白色の文字に変わり、見やすくなりました
ボタンの大きさを変える
padd と入力し、padding を選択します
上下の余白 15px 左右の余白 30px と入力します。
・余白のpaddingについては、次回詳しく解説します
更新してweb表示させると、文字の大きさは変わりませんが、ボタンは大きくなっていることがわかります。
ボタンの縁を消す
ボタンの下と右側にグレーの「ふち」があるのがわかりますでしょうか？この「ふち」を消したいと思います
bo と入力すると、どれですか？メニューが表示されるので、border を選択します
none と入力します。none は「枠線をなくす」指定です
「ふち」がなくなってスッキリしました。
文字のサイズを変える
文字が小さいので、少しだけ大きくします。
fo と入力し、どれですか？メニューから font-size を選択します
16px と入力します
更新してweb表示させると、文字の大きさが少し大きくなりました
マウスを乗せたら指マークになる
お待ちかね！マウスが指マークになる指定をしましょう！
cur と入力し、どれですか？メニューから、cursor を選択します
pointer と入力します
マウスをボタンに乗せてみましょう！指のマークになります！
次回は、マウスをボタンに乗せた時に、少し大きくなるアニメーションについて解説します
コメント