增加按钮周围的点击区域，而不是锚点

Question

我想扩展按钮的点击区域(不是锚点)。我已经看到了锚的例子，但船已经开了，我必须使用按钮。

按钮没有什么特别的:

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

我尝试使用:before:after pseudo

.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的"假按钮"样式。

我的代码是你的代码的反向版本。单击区域设置在按钮本身和按钮视图上的:前伪。你可以随意设置样式。

工作小提琴

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;
}

Answer 2

小提琴

按钮可以有内部HTML内容。

那么，在按钮内部添加一个span之类的并将css添加到内部html元素中并使按钮背景透明

HTML:

<button onclick="myFunction()"><span>TEST</span></button>
<script>
function myFunction() {
    alert("I am an alert box!");
}
</script>

css:

button{
  background: transparent;
  border: none; 
  outline: none; // removes button's default styles
  padding: 50px 100px; // increases the button's area
}
span{
    background: #000; 
    color: #fff; 
    padding: 20px; // This is the visible area inside the button
}

小提琴

Answer 3

只是添加一些填充到你的按钮，你可能需要改变按钮的背景透明或任何其他颜色/背景;

Answer 4

为button元素添加透明的border，如下所示:

body{
  background:#000;
  color:#000;
  font-family:sans-serif;
}
button{
  background:#fff;
  background-clip:padding-box;
  box-sizing:border-box;
  border:10px solid transparent;
  padding:10px;
}

<button>text</button>

Answer 5

change html

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

添加css

 .example span
{
  padding-top:50px;
  padding-bottom:50px;
}