Question

Context

I’ve this buttons:

I detect when the user is clicking with jQuery .click().

But it works only if the user clicks on the text ("imdb" / "rottenTomatoes").

If the user clicks on the blue of button, jQuery detects nothing.

You can try on http://promobluray.fr.

Questions

• What is the problem?
• How to get this to work like a button?

Code

html:

<span class="rating">  
    <span class="rating-btn imdb active">imdb</span>
    <span class="rating-btn rt">rottenTomatoes</span>
</span>​

css:

.rating {
    padding: 14px;
}

.rating-btn {
    display: inline-block;
    margin-top: 24px;
    padding: 4px;
    position: relative;
    font-family: 'Open Sans',sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: white;
    cursor: pointer;
    background-image: -o-linear-gradient(bottom,#2CA0CA 0,#08C 100%);
    background-image: -moz-linear-gradient(bottom,#2CA0CA 0,#08C 100%);
    background-image: -webkit-linear-gradient(bottom,#2CA0CA 0,#08C 100%);
    background-image: -ms-linear-gradient(bottom,#2CA0CA 0,#08C 100%);
    background-image: linear-gradient(bottom,#2CA0CA 0,#08C 100%);
    -webkit-box-shadow: inset 0 1px 0 #7fd2f1,0px 6px 0 #156785;
    -moz-box-shadow: inset 0 1px 0 #7fd2f1,0px 6px 0 #156785;
    box-shadow: inset 0 1px 0 #7fd2f1,0px 6px 0 #156785;
    border-radius: 5px;
}

.rating-btn::before {
    background-color: #072239;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 4px;
    left: -2px;
    top: 5px;
    z-index: -1;
    border-radius: 6px;
   -webkit-box-shadow: 0 1px 0 #fff;
   -moz-box-shadow: 0 1px 0 #fff;
   box-shadow: 0 1px 0 #fff;
}

.active {
    background: #2CA0CA;
    -webkit-box-shadow: inset 0 1px 0 #7fd2f1,inset 0 -1px 0 #156785;
    -moz-box-shadow: inset 0 1px 0 #7fd2f1,inset 0 -1px 0 #156785;
    box-shadow: inset 0 1px 0 #7fd2f1,inset 0 -1px 0 #156785;
    top: 7px;
    cursor: default;
}

.imdb {
    margin-right: 5px;
}

jquery:

$('.rating-btn').click(function() { ... });

​

Answer 1

You could try to increase the padding of the button so that the <span> matches the dimension of the image, but i think that the best solution is to change your markup and actually use <button>