CODEWITHSUNDEEP
htmlcsshref
Kukula Mula
Kukula Mula

Reputation: 1869

HTML creating <a href...> with style

I've created a link that looks like a button like this:

<a target='_blank' href="mailto:[email protected]?Subject=bla bla" style='background:#44ff22;color:#ffffff;font-size:15px;padding:8px 12px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;text-decoration:none;'>Email Me</a>

the problem is that the clickable area is not the entire box (it's on the top third portion of the "button") so one might think its not working

How can I create the clickable rectangle area?

Upvotes: 0

Views: 42019

Answers (2)

NoOorZ24
NoOorZ24

Reputation: 3222

Why bother? Just put your tags around a button

<a><button></button></a>

Upvotes: 2

unalignedmemoryaccess
unalignedmemoryaccess

Reputation: 7441

Add display: block or display: inline-block property to your style.

a {
  background:#44ff22;
  color:#ffffff;
  font-size:15px;
  padding:8px 12px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  text-decoration:none;
  
  display: block; /* Added */
}
<a target='_blank' href="mailto:[email protected]?Subject=bla bla">Email Me</a>

a {
  background:#44ff22;
  color:#ffffff;
  font-size:15px;
  padding:8px 12px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  text-decoration:none;
  
  display: inline-block; /* Added */
}
<a target='_blank' href="mailto:[email protected]?Subject=bla bla">Email Me</a>

Upvotes: 0

Related Questions