图像按钮在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

您可以将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>

Answer 2

你可以这样做。 （用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>

Working JSFiddle