Cataneo Cataneo - 2 months ago 9
CSS Question

Increase clicking area around a button, not an anchor

I want to expand the clicking area of a button (not an anchor).
I already saw the examples with anchors, but that ship sailed already, I must use buttons.

There's nothing special about the button:

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


I tried using :before :after pseudo

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


I see the outline, I can also click it in Chrome. Not in Firefox though.
I need a different approach.

Answer

Fiddle

Buttons can have inner HTML content.

So, Add a span or something inside the button and add the css to the inner html element and make button background transparent

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

Comments