html - 增加按钮周围的点击区域，而不是 anchor

Question

我想扩大按钮(不是 anchor )的点击区域。 我已经看到了带 anchor 的例子，但是那艘船已经起航了，我必须使用按钮。

按钮没有什么特别之处:

<button class="example">OK</button>

我尝试使用 :before :after 伪

.example {
        position: relative;
}   
.example::before {
        outline: 1px solid red;
        content: '';
        position: absolute;
        top: -10px;
        bottom: -10px;
        left: -10px;
        right: -10px;
    }

我看到了轮廓，我也可以在 Chrome 中点击它。虽然不在 Firefox 中。 我需要一种不同的方法。

Answer 1

我为您找到了这个解决方案。 您可以更改 .example 上的点击区域和 :before pseudo 中的“假按钮”样式。

我的代码是你的反向版本。单击区域设置在按钮本身上，按钮 View 设置在 :before pseudo 上。 您可以根据需要设置样式。

Working Fiddle

CSS:

.example {
  position: relative;
  width: 200px;
  height: 200px;
  background: none;
  border: none;
}

.example:before {
  content: '';
  z-index: -1;
  background: gainsboro;
  border: 1px solid gray;
  border-radius: 3px;
  position: absolute;
  min-width: 50px;
  min-height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
}

.example:active:before {
  background: gray;
}