transitionをつかって、マウスホバーすると変化するボタンを作っていきます。

• ボタンの作成
• transitionによる効果の設定

ボタンの作成

・今回はボタンを作ってホバーすると時間をかけて色が薄くなるように指定していきます。

・まずはHTMLとCSSでボタンを作っていきます。HTMLで<a href=”#” class=”btn”>ボタン</a>としてあげてCSSでクラスセレクターを.btnに指定してあげます

・CSSではスタイルを指定していくのでパディング、背景、文字色、角丸、ボックスシャドウなどを指定していきボタンっぽくしていきます。あとはカーソルを持ってきたときにポインターに変わるように指定します。

・次にCSSのセレクターに.btn:hoverにしてホバーしたところの変化を指定していきます。明度はopacityプロパティで変えることができるので値を.7と指定すると少し明るくなるように指定できます。

transitionによる効果の設定

・最後に.btnにtransition: opacity .3s;としてあげると明度が0.3秒かけて変化するようになります。

-広告-

Anker PowerExpand Direct 7-in-2 USB-C PD メディア ハブ 4K対応 HDMIポート 100W出力 Power Delivery 対応 Thunderbolt 3 USB-Cポート USB-A ポート microSD & SDカード スロット搭載 価格：5999円（税込、送料無料) (2020/10/2時点) 楽天で購入

PD 充電器 RAVPower Type C 急速充電器 90W【GaN (窒化ガリウム)採用/2ポート/折畳式/PD対応/PSE認証済】iPhone 11/11 Pro/11 Pro Ma 価格：7329円（税込、送料無料) (2020/10/2時点) 楽天で購入