Problem in clicking button all over it. CSS button.

Question

Probem
I have a CSS button which am able to click only on the test area. I am unable to click on the non-text area of the button.

Here is the HTML code for the "EDIT" button on my website.

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

Below is the CSS code for the button.

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

Please let me know how i can make the clicking work all over the button. THANKS!!

Answer 1

Make the <a> tag display: block and give it a width and height, so that the button fully consists of the <a> element.

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

Alternatively, you can give it a border so that the text is in the middle of the button:

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

Answer 2

I think the problem is that the p tag is inside the div but you apply the background image to the div but the link in the p. The p also has padding.

So in a nutshell try do it all in the one tag.

EDIT: like @Sjoerd says: use the a tag.

Answer 3

You don't really need the p tag. Apply everything to the div and I think you should be ok. I would really apply the click to an href though then you can also have a fallback if nesseccary for people without JS or search engines.

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

In this case apply the button properties to the a tag.

Answer 4

Try to use "a href" tag only and then add padding and background to it. padding: 5px 5px; background:grey; This will look like a button and will be clickable.