CSS

ふわっと色が変わるボタンをつくろう

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

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

ボタンの作成

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

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

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

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

transitionによる効果の設定

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

-広告-

 

 






-CSS