今回は、左側の吹き出しの中にアイコンを入れ、ホバー時にCSSの「box-shadow」プロパティを用いて影を付ける方法について解説していきます。
ホバーエフェクトを入れることで少しリッチな印象をユーザーに与えることができるので、今回紹介する「box-shadow」のプロパティ値を色々カスタマイズして見た目を向上させましょう。
左の余白を多めに取る
「padding: 1rem 1rem 1rem 4rem;」で左の余白を多めにとります。
<a href="" class="btn-fukidashi-icon">
CSSボタン
</a>
.btn-fukidashi-icon {
position: relative;
padding: 1rem 1rem 1rem 4rem;
background-color: #4295A4;
color: white;
text-decoration: none;
transition: .5s;
}アイコンと吹き出しを入れる
before疑似要素で「font-family」に"Font Awesome 5 Free"を指定し「content: "\f002";」でアイコンを表示。after疑似要素で右矢印を作り吹き出しに。
.btn-fukidashi-icon::before {
position: absolute;
top: 0; left: 0;
padding: 1rem;
background-color: #272E32;
color: #4295A4;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f002";
}
.btn-fukidashi-icon:after {
position: absolute;
top: 50%; left: 3rem;
height: 0;
width: 0;
border: solid transparent;
border-left-color: #272E32;
border-width: 7px;
margin-top: -7px;
content: "";
}ホバー時に要素をぼかす
ホバー時に「box-shadow」でぼかしを入れ「transition: .5s;」で0.5秒間でぼかしを表示します。
.btn-fukidashi-icon {
...
transition: .5s;
}
.btn-fukidashi-icon:hover {
box-shadow: 0 0 10px #222;
}
