[CSS] ボタンをマウスオーバーしたときにふわっと色を変える
やりたいこと
- マウスオーバーでボタンの色を変えるボタンというのはよくあるパターンです
- マウスを乗せてパッと色を変えてもいいのですが、1行コードを追加するだけでちょっと印象を変えることができます
サンプルコード（修正前）
.btn {
padding: 1em 4em;
border: 1px solid #3388dd;
}
.btn:hover {
background-color: #3388dd;
}
サンプルコード（修正後）
.btn {
padding: 1em 4em;
border: 1px solid #3388dd;
transition: 0.5s;
}
.btn:hover {
background-color: #3388dd;
}
仕組み、解説、補足など
- 「transition: 0.5s;」を追加するだけ、色がふわっと変化するようになります。どことなく上品な感じです
- ちょっとしたコードでだいぶ印象が変わるというのも、CSSのおもしろいところですね
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。