ホバーすると影が消えるボタンを作ろう！

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

１分で理解できるHTML/CSS講座シリーズです。

今回はホバーすると影が消えるボタンの作り方について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

１分で理解できるHTML/CSS講座シリーズはじめっ！

ボタンを作ろう!

いきなりですが、完成版はこちらになります。

See the Pen Untitled by samehack (@samehack) on CodePen.

やっていることは、

影の付け方は、box-shadowプロパティを使います。

box-shadowの記述はこのように行います。

/* 
box-shadow: X軸のサイズ Y軸のサイズ 色;
 */
box-shadow: 5px 5px rgba(255, 255, 255, 0.7);

アニメーションの速度はtransitionプロパティを使います。

これは通常時とホバー時の表示の切り替えにどのくらいの時間をかけるか
という部分に対する指定です。

transitionの記述はこのように行います。

/* 
transition: 対象プロパティ アニメーションの時間 アニメーションを開始する時間 変化の度合い;
transition: property duration delay function;
 */
transition: all 0.5s 0s ease;

時間だけ指定したい!という場合は↓のように記述すればOKだよ！
transition: 0.5s;

位置の調整にはtransformプロパティを使います。

transformの記述はこのように行います。

transform: translate(X軸, Y軸);

/* もしくは */
transform: translateX(X軸);
transform: translateY(Y軸);

これらを組み合わせたものが、完成版のボタンだよ！

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈