見出し画像

CSS Tips:カーソルを乗せると大きくなるボタン/画像

再び、最近のWebサイトでよく見かけるデザインの要素をコーディングするコーナーです。

今回は、リンク対象のボタンや画像にカーソルを乗せると少しばかり大きくなるあれです。

単に大きくするだけなら割と簡単です。

コードの書き方

:hover擬似クラスにtransitionプロパティとtransformプロパティのscale関数を使うだけです(transitionプロパティは:hoverじゃない方に設定)。
widthやheightプロパティでも行ける…けど、スムーズなアニメーションになってくれませんでした…。

問題は、ボタンを拡大したいけど文字サイズを変えたくない場合です。

これを実装するには、ボタンそれ自体のブロック要素ではなく、::before疑似要素に対してボタンの形とアニメーションを設定する必要があります。
(そうしないと、文字ごと大きくなります🙄)

そして、文字はボタンに対して子要素にし、position: absoluteを設定します(そして、親要素に対してはposition: relativeを設定)。
こういうことをわざわざするのは、ボタンから文字がはみ出したりするためです。topやleftプロパティなどで適宜位置を修正します。

詳しくは、↓のCodePenでコードを見ればわかります。
※SCSS形式で書いてるけど、基本的な部分は普通にCSSで書いても変わらないです。

まとめ

…というか参考資料。少なくとも私が大好きなMDNより引用。

<transformプロパティ>

<CSS トランジション(transitionプロパティ)>

<positionプロパティ>

<transitionプロパティのcubic-bezier関数関連>

実際の動きはhttp://cubic-bezier.com/で試してみましょう。

参考記事:直感的にCSSのイージングを作成できるサイト「cubic-bezier」

頂いたサポートはチャオちゅーる購入…じゃなくて、営業活動など仕事で必要なものに使わせていただきます。 フリーランスの仕事が軌道に乗ってきたら、母親になにかプレゼントでもします。あるいは猫様をお迎えするか。