CODEWITHSUNDEEP
cssbutton
Ian McCullough
Ian McCullough

Reputation: 1443

Why does this CSS button mess with <a> tags?

Here is my CSS

   button {
    border: 0 none;
    cursor: pointer;
    padding: 0 15px 0 0;
    text-align: center;
    height: 30px;
    line-height: 30px;
    width: auto;
}
button a {
    color:white;
    text-decoration:none;
}

button.rounded {
    background: transparent url(/images/button/btn_right.png) no-repeat scroll right top;
    clear: left;
    font-size: 0.8em;
}

button span {
    display: block;
    padding: 0 0 0 15px;
    position: relative;
    white-space: nowrap;
    height: 30px;
    line-height: 30px;
}

button.rounded span {
    background: transparent url(/images/button/btn_left.png) no-repeat scroll left top;
    color: #FFFFFF;
}

button.rounded:hover {
    background-position: 100% -30px;
}

button.rounded:hover span {
    background-position: 0% -30px;
}

button::-moz-focus-inner {
border: none;
}

Here is the code for my "button" with a link in it.

<button class="rounded"><span><a href="profile.php">Profile</a></span></button>

The issue is it does not link to the href when i click on it. Anyone know why?

Upvotes: 3

Views: 223

Answers (2)

Kevin
Kevin

Reputation: 13226

I believe button needs a type and value attribute.

http://www.w3schools.com/tags/tag_button.asp

You can also add onclick like:

<button onclick="location.href='/profile.php';">Profile</button>

But, since its just a regular link, you'll have a easier time using the <a> tag and styling it with CSS.

Upvotes: 0

ChrisLively
ChrisLively

Reputation: 88044

Incidentally, it's not a CSS problem. It's a "i don't understand buttons" problem:

http://www.w3schools.com/tags/tag_button.asp

A button can have "submit", "button" or "reset" actions. If you are using the "button" action you should provide the javascript necessary in the OnClick event to navigate to the page in question.

Upvotes: 7

Related Questions