バナーボタンとホバー時の画像の拡大
バナーボタン
- 角が丸い
- マウスオーバー時に色が変わる
- アイコンに画像を追加
ボタンを角丸にする
border-radius:○○px;
border-radius - CSS: カスケーディングスタイルシート | MDN
画像アイコンの挿入
after・before要素を使用して、前後にアイコン等を挿入する
urlを指定するとディレクトリやurlに埋め込んだ画像を直接呼び出すこともできる
content - CSS: カスケーディングスタイルシート | MD
マウスオーバー時にエフェクトをするときは
hoverを使用して、指定を行う。
:hover - CSS: カスケーディングスタイルシート | MDN
マウスオーバーすると、画像の拡大
- マウスオーバー時に画像が拡大される
- 画像の枠からは画像をはみ出さない
scale()とoverflow:hiddenを使用する