Klickfläche um eine Schaltfläche vergrößern, kein Anker

Question

Ich möchte den Klickbereich einer Schaltfläche (kein Anker) erweitern. Ich habe schon die Beispiele mit Ankern gesehen, aber dieses Schiff ist schon gesegelt, ich muss Knöpfe benutzen.

Es gibt nichts besonderes über die Schaltfläche:

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

ich versuchte mit: Vorher: nach pseudo

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

ich die Umrisse zu sehen, kann ich es auch in Chrome klicken. Nicht in Firefox obwohl. Ich brauche einen anderen Ansatz.

Answer 1

Fiddle

Buttons können innere HTML-Inhalt haben.

also eine Spanne oder etwas in die Schaltfläche Hinzufügen und die CSS auf den inneren HTML-Element hinzufügen, und Taste Hintergrund transparent machen

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 2

Fügen Sie Ihrer Schaltfläche nur eine Auffüllung hinzu, möglicherweise müssen Sie den Hintergrund der Schaltfläche auf transparent oder eine andere Farbe/Hintergrund ändern; Oder fügen Sie Höhe und Breite hinzu;

Answer 3

hinzufügen transparent border zu Ihrem button Element, etwa 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>

Answer 4

Änderung html

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

add css

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

Answer 5

Ich finde diese Lösung für Sie. Sie können den Klickbereich auf .example und den "Fake Button" -Stil im :before pseudo ändern.

Mein Code ist die umgekehrte Version von Ihnen. Der Klickbereich wird auf der Schaltfläche selbst und die Schaltflächenansicht auf dem: vor-Pseudo festgelegt. Sie können es wie gewünscht gestalten.

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