Problème en cliquant sur le bouton partout. Bouton CSS

Question

Probem
J'ai un bouton CSS qui ne peut cliquer que sur la zone de test. Je suis incapable de cliquer sur la zone de texte du bouton.

Voici le code HTML pour le bouton "EDIT" sur mon site web.

<div class="stndrd_btn"> 
    <p><?php echo $html->link('Edit','... destination....'); ?></p> 
</div> 

Vous trouverez ci-dessous le code CSS du bouton.

.stndrd_btn { 
    width:140px; 
    height:30px; 
    background:url(img/stndrd_btn.png); 
    color:#FFF; 
    cursor: pointer; 

} 

.stndrd_btn p { 
    color:#FFF; 
    margin:0 auto; 
    text-align:center; 
    vertical-align: middle; 
    padding-top:6px; 
    font-size:14px; 
    font-weight: bold; 
    width: 100%; 
    height: 100%; 
    display: block; 
    cursor:pointer; 
} 

S'il vous plaît laissez-moi savoir comment je peux faire le clic sur le bouton. MERCI!!

Answer 1

Créez l'étiquette <a> et donnez-lui une largeur et une hauteur, afin que le bouton se compose entièrement de l'élément <a>.

<a href="http://www.google.com" style="display: block; width: 300px; height: 200px; background: gold;">Go to Google</a> 

Vous pouvez donner une bordure pour que le texte est au milieu du bouton:

<a href="http://www.google.com" style="display: block; width: 300px; border: solid gold 100px; background: gold;">Go to Google</a> 

Answer 2

Je pense que le problème est que la balise p est à l'intérieur du div mais vous appliquez l'image d'arrière-plan au div mais le lien dans le p. Le p a également le remplissage.

Donc, en un mot, essayez le tout dans un tag.

EDIT: comme @Sjoerd dit: utilisez la balise a.

Answer 3

Vous n'avez pas vraiment besoin de la balise p. Appliquez tout à la div et je pense que vous devriez aller bien. Je voudrais vraiment appliquer le clic à un href mais alors vous pouvez également avoir un repli si nesseccary pour les personnes sans JS ou moteurs de recherche.

<div class="stndrd_btn"> 
    <a href="#"><?php echo $html->link('Edit','... destination....'); ?></a> 
</div> 

Dans ce cas, appliquez les propriétés du bouton à l'étiquette a.

Answer 4

faire la <un> comme display: block et lui donner un rembourrage quelque chose comme

padding: 5px 5px 5px 5px;

cela va augmenter la zone de clic d'un lien

Answer 5

Essayez d'utiliser la balise « a href » ne puis ajouter le remplissage et le fond à elle. rembourrage: 5px 5px; fond: gris; Cela ressemblera à un bouton et sera cliquable.