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」