CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Eddie Teixeira
Eddie Teixeira

Reputation: 342

Stop Bootstrap3 button text to turn underline on mouseover

I'm trying to stop bootstrap 3 default button to be underline when mouseover, but no success at all. Here is my CSS and HTML code:

.btn-default:hover {
  font-style: normal;
  background-color: white;
}
<button type="button" class="btn btn-default btn-lg"><a href="#tech-skills">Tech Skills</a>
</button>

Notice that I could change the :hover background-color, but looks like the propertie font-style is not referred to what I'm trying to change.

Here is how the button looks like:

Button Sample

Upvotes: 0

Views: 727

Answers (1)

Devon Bernard
Devon Bernard

Reputation: 2300

Underlines are controlled by the text-decoration CSS attribute, not the font-style attribute. Also, the underline is not being applied to the button tag itself, but the anchor tag within the button.

See this demo:

a {
  text-decoration: none;
}
<button type="button" class="btn btn-default btn-lg"><a href="#tech-skills">Tech Skills</a>
</button>

Upvotes: 1

Related Questions