CODEWITHSUNDEEP
htmlcss
Cataneo
Cataneo

Reputation: 155

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.

Upvotes: 2

Views: 144

Answers (5)

Kiran Dash
Kiran Dash

Reputation: 4956

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

Upvotes: 0

Zeev Katz
Zeev Katz

Reputation: 2273

I find this solution for you. You can change the clicking area on .example and the "fake button" style in the :before pseudo.

My code is the reversed version of yours. The clicking area set on the button itself and the button view on the :before pseudo. You can style it however you want.

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

Upvotes: 1

Deepak Sharma
Deepak Sharma

Reputation: 419

change html

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

add css

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

Upvotes: 0

Shaggy
Shaggy

Reputation: 6796

Add a transparent border to your button element, like so:

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>

Upvotes: 0

Mike Trinh
Mike Trinh

Reputation: 1303

Just add some padding to your button, you may need to change the background of the button to transparent or any other color / background; Or add height and width;

Upvotes: 0

Related Questions