どうも7noteです。透過時に背景が見えてしまう対策方法

背景色が入っている箇所の上にボタンを配置した時、ボタンがhoverで透過した際に背景色がうっすら見えてしまう対策方法について。

画像を使わずに、背景色で作成したボタンであれば次の方法で対策をすることができます。

（※ボタンが画像の場合はこちら）

ソース

index.html

<div class="box">
  <div class="btnA">透けちゃう。</div>
  <div class="btnB">透けないよ！</div>
</div>

style.css

.box {
  padding: 50px;         /* 適当な余白を確保 */
  background: #f36 25%,  /* 分かりやすいよう赤のストライプを指定 */
    #fff 25%,
    #fff 50%,
    #f36 50%,
    #f36 75%,
    #fff 75%,
    #fff
  );
  background-size: 40px 40px;  /* 適度な大きさに指定 */
}

.btnA,
.btnB {
  width: 150px;         /* 横幅を適当なサイズに指定 */
  text-align: center;   /* 文字を中央揃え */
  background: #eee;     /* 背景色をグレーに */
  padding: 10px 30px;   /* 内側の余白を指定 */
  margin: 10px;         /* ボタン同士が見やすいよう適度な余白 */
}

.btnA:hover {
  opacity: .9;          /* これだと透けてしまう */
}

.btnB:hover {
  background: #fafafa;  /* これなら透けない */
}