Кнопка изображения не активируется в HTML5 / CSS3

Question

У меня проблема с получением кликабельного изображения на моем сайте. Все мои стандартные кнопки со ссылками работают нормально. Ниже я вставлю свой код CSS и HTML5, соответствующий данной кнопке. Я опускаю фактическую ссылку по очевидным причинам.

.button3 {
  background-image: url("donate.png");
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  cursor: pointer;
  width: 200px;
  height: 60px;
  margin-left: 500px;
  margin-right: 5px;
  margin-top: 40px;
}

<div class="button3">
  <a href="link" class="button3"></a>
</div>

Answer 1

Вы можете сделать это.(замените ваше изображение на s / o одно).С вашими текущими стилями я добавил display: inline-block к якорю .

.button3 {
  background-image: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e");
  display: inline-block;
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  cursor: pointer;
  width: 200px;
  height: 60px;
  margin-left: 500px;
  margin-right: 5px;
  margin-top: 40px;
}

<a href="link" class="button3"></a>

Работающий JSFiddle

Answer 2

Вместо этого вы можете обернуть свою кнопку div в тег привязки, таким образом, тег привязки будет растягиваться на ширину и высоту его содержимого, что позволит вам сделать весь элемент div интерактивным.

См. Пример ниже:

.button3 {
  background-image: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e");
  background-size: cover;
  background-position: center;
  border-radius: 25px;
  cursor: pointer;
  width: 200px;
  height: 150px;
  /*margin-left:500px;
  margin-right:5px;*/
  margin-top: 40px;
}

<a href="link">
  <div class="button3">
  </div>
</a>