【CSS】ホバーすると色が変わるボタンを作る

CodePenに登録してみたので、初埋め込みがてらクソザコCSSを書いてみます。

前書き（クリックで展開）

俺氏バックエンドエンジニア

CSS、HTMLがわからない

2年半くらい前、上司様に「今工数に余裕あるし、教えようか？」と言っていただき、一瞬だけ教わっていた時期があった。

まぁ、数日しか平和な日々は続かなかったが―――

その時に教わったことを思い出しつつ、色々書いて試して遊んでみようと思う…そんなコーナーです。

---

ちょっとオシャ気味なサイトによくある、「ホバーしたらファ～っと色が変わるボタン」を作る。

書いたコードは以下の通り。

See the Pen 黒いけどホバーしたらファ～っと白くなるボタン by gmksprg (@gmksprg) on CodePen.

CSSはガチガチの初心者だからクラス定義が汚いのは見逃してください

特筆事項は transition くらい。

transition: 0.5s;

普段は黒ボタン用のクラス osya-button とhover時のクラス .osya-button:hover を用意し、0.5sかけて反映させていくだけ。