CODEWITHSUNDEEP
htmlcssbuttonhover
whoaaallamapajama
whoaaallamapajama

Reputation: 101

Centering text in a button without underlining the hover state. Why is this so hard?

I want the text centered and not decorated. As you can see, I have a lot of text decoration:none CSS not still no dice...I'm so confused. Should the div be inside or outside the link?

HTML - 

 <a href=""
       data-toggle="modal"
       data-target="#videoModal"
       data-theVideo="http://www.youtube.com/embed/loFtozxZG0s">
      <div class="round-button">
           <i class="fa fa-play"></i>  Watch Trailer
      </div>
    </a>

CSS - 

.round-button {
  width:20%;
  width: 15em;
  height: 3em;
  margin-top: 1em;
  moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  background: #f49131;
  vertical-align: middle;
  text-align:center;
  color:white;
  font-size: 1.4em;
  text-decoration:none;
  cursor:pointer;

}

.round-button:hover {
  background:#f46800;
  text-decoration:none;
}
.round-button a {
  display:block;
  vertical-align: middle;
  text-decoration:none;
}

.round-button a:hover {
  text-decoration: none;
}

Regular State - enter image description here

Cursor State - enter image description here

Upvotes: 0

Views: 143

Answers (1)

Paulie_D
Paulie_D

Reputation: 115175

Your selector is incorrect.

.round-button a assumes that the link is a descendant of the .round-button class but, in fact the reverse is true.

a .round-button {
  width: 20%;
  width: 15em;
  height: 3em;
  line-height: 3em;
  margin-top: 1em;
  moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  background: #f49131;
  vertical-align: middle;
  text-align: center;
  color: white;
  font-size: 1.4em;
  text-decoration: none;
  cursor: pointer;
}
a {
  text-decoration: none;
}
<a href="#" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/loFtozxZG0s">
  <div class="round-button">
    <i class="fa fa-play"></i> Watch Trailer
  </div>
</a>

In fact you can simplify the whole thing by not using a div and just styling the link

JSfiddle Demo

Upvotes: 3

Related Questions