CSS Button- Link only on text, not on button

Question

I am making a CSS button to have as a widget. The href link only applies when hovered/clicked on the "Call Us" text, how do I get it to show on the whole button?

HTML:

<div class="mybutton"><a href="http://example.com">Call Us</a></div>

CSS:

.mybutton {
  width: 200px;
  height: 80px;
  background-color: #214b83;
  color: #fff;
  text-align: center;
}

Answer 1

a element has display:inline by default so you can give display:block; and then give height:100%; and width:100%; . For centering the text, you need to give line-height:80px; ( height of parent).

 .mybutton { width: 200px; height: 80px; background-color: #214b83; color: #fff; text-align: center; } .mybutton a { display: block; width: 100%; height: 100%; background: red; line-height: 80px; } 

 <div class="mybutton"><a href="http://example.com">Call Us</a> </div> 

Answer 2

Just apply the .mybutton style to your <a> element. You'll have to add display: block to the CSS rules to make it behave in the same way as a <div> , but that's all there is to it.

  .mybutton { display:block; width: 200px; height: 80px; background-color: #214b83; color: #fff; text-align: center; } 

 <a class="mybutton" href="http://example.com">Call Us</a> 

Answer 3

 .mybutton {
   width:200px;
   height: 80px;
   background-color:#214b83;
   color:#fff;
   text-align:center;
 }

 .mybutton a{
   line-height: 80px;
   display:block;
 }

Answer 4

只需更改HTML代码中元素的顺序即可：

<a href="http://example.com"><div class="mybutton">Call Us</div></a>

Answer 5

  .mybutton { width:200px; height: 80px; background-color:#214b83; color:#fff; text-align:center; } .mybutton a{ line-height: 80px; display:block; color:#fff; } 

  <div class="mybutton"><a href="http://example.com">Call Us</a></div> 

Answer 6

add this it will work for you.

.mybutton a{
   line-height: 80px;
   display:block;
}