バナーボタンとホバー時の画像の拡大

バナーボタン 

  1. 角が丸い 
  2. マウスオーバー時に色が変わる
  3. アイコンに画像を追加

css

ボタンを角丸にする

border-radius:○○px;

border-radius - CSS: カスケーディングスタイルシート | MDN

 

画像アイコンの挿入

after・before要素を使用して、前後にアイコン等を挿入する

urlを指定するとディレクトリやurlに埋め込んだ画像を直接呼び出すこともできる

content - CSS: カスケーディングスタイルシート | MD

 

マウスオーバー時にエフェクトをするときは

hoverを使用して、指定を行う。

:hover - CSS: カスケーディングスタイルシート | MDN

マウスオーバーすると、画像の拡大

  1. マウスオーバー時に画像が拡大される
  2. 画像の枠からは画像をはみ出さない

css

scale()とoverflow:hiddenを使用する

scale() - CSS: カスケーディングスタイルシート | MDN

overflow - CSS: カスケーディングスタイルシート | MDN