はじめに
SNSシェアボタンを通常はコンパクトに表示し、マウスオーバー時に拡大します。
この記事では、この方法について説明します。
完成イメージ
実装手順
以下のコードをstyle.cssに追加します。
.sns-share-buttons a {
flex-grow: 1;
&:hover {
flex-grow: 3;
transition: flex-grow 0.3s ease-out;
}
}さいごに
今回紹介した方法を使えば、SNSシェアボタンをマウスオーバー時に拡大し、視認性を向上させることができます。
デザインを工夫することで、より目を引くシェアボタンにカスタマイズすることも可能です。
