Menu
I ran into a strange issue while building my wordpress site. All links that are inside the bootstrap buttons are not active in firefox.
What could cause this?
Here's the html output:
<button class="btn pull-right" role="button">
<a href="http://domain.dev/?cat=4" name="View all News">
All News
</a>
</button>
Here's the css:
.home #primary #home-more .btn {
background-image: url("../img/home-button-sprite-more.png");
background-repeat: no-repeat;
margin-right: 0px;
background-color: transparent;
padding: 13px 40px;
background-position: 20px 0px;
}
button.btn {
display: inline-block;
padding: 13px 24px;
margin-bottom: 0px;
margin-right: 10px;
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
line-height: 1;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: medium none;
border-radius: 0px 0px 0px 0px;
white-space: nowrap;
-moz-user-select: none;
}
237
We can style an anchor tag to look like a button using CSS. This is the default HTML styling for an anchor tag. We can add a class to the anchor tag and then use that class selector to style the element. Now we have an anchor tag that looks like a button.
Inside a <button> element you can put text (and tags like <i> , <b> , <strong> , <br> , <img> , etc.). That is not possible with a button created with the <input> element! Tip: Always specify the type attribute for a <button> element, to tell browsers what type of button it is.
Using button tag inside <a> tag: This method create a button inside anchor tag. The anchor tag redirect the web page into the given location. Adding styles as button to a link: This method create a simple anchor tag link and then apply some CSS property to makes it like a button.
Instead of,
<button class="btn pull-right" role="button">
<a href="http://domain.dev/?cat=4" name="View all News">
All News
</a>
</button>
You have to use,
<a href="http://domain.dev/?cat=4" name="View all News">
<button class="btn pull-right" role="button">
All News
</button>
</a>
Or,
<a href="http://domain.dev/?cat=4" title="View all News" class="btn pull-right">
All News
</a>
Try what @Devo has suggested else try this
<a class="btn btn-primary" href="http://domain.dev/?cat=4">All News</a>
Hope this helps.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
