【HTML,CSSの基礎】⑦マウスカーソルが乗ったときにボタンの色を変える

こんにちは、Mac大好きです！Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。

プログラミングは楽しんでやることが大切です！

そこで今日は、駆け出しエンジニアの方向け「楽しく学べるWeb制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。


今日は「マウスカーソルがのった時にボタンの色を変える」をやっていきます。

マウスカーソルがのった時にボタンの色を変える

「マウスカーソルでボタンを選んだ時に色が変わるボタン」ってありますよね。それの作り方です。まずはResultを見て下さい。

「送信する」のボタンを触ると「ボタンの色が赤く」なると思います。

HTML

まず、HTMLでbuttonタグを使ってボタンを作りましょう。

CSS

次はCSSです。

下記のコードのように、button:hover{}　の中に、マウスカーソルが乗った時の挙動を指定すればOKです。

背景を「red」にして、文字色を「white」にしたいので、以下のように指定しています。

button:hover{
 background-color: red;
 color: white;
}

簡単ですね。

他にも、マウスカーソルがのったらボタンを大きくしたり、影をつけたり。いろいろできます。いろいろ試してみましょう。

今日はここまでです。

これからも「プログラミング初心者向け」に簡単なコードをご紹介していきます。「Progateの復習」に使ってみてください。一緒にプログラミングを楽しんでいきましょう！よろしくお願いします。