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上的点击区域和＆＃34;假按钮＆＃34; :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;
}

Answer 2

只需在按钮上添加一些填充，您可能需要将按钮的背景更改为透明或任何其他颜色/背景; 或者添加高度和宽度;

Answer 3

Fiddle

按钮可以包含内部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
}

Fiddle

Answer 4

向border元素添加透明button，如下所示：

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

更改html

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

添加css

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

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

5 个答案: