Cataneo Cataneo - 1 year ago 84
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 Source


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


<button onclick="myFunction()"><span>TEST</span></button>

function myFunction() {
    alert("I am an alert box!");


  background: transparent;
  border: none; 
  outline: none; // removes button's default styles
  padding: 50px 100px; // increases the button's area

    background: #000; 
    color: #fff; 
    padding: 20px; // This is the visible area inside the button


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download