Question

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

<a target='_blank' href="mailto:me@myemail.com?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?

Answer 1

为什么要这么麻烦？只需将标签放在按钮旁边

即可

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

Answer 2

将display: block或display: inline-block属性添加到您的样式中。

＆＃13;

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 */
}

＆＃13;

<a target='_blank' href="mailto:me@myemail.com?Subject=bla bla">Email Me</a>

＆＃13;

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 */
}

＆＃13;

<a target='_blank' href="mailto:me@myemail.com?Subject=bla bla">Email Me</a>

＆＃13;

HTML创建<a href...=""> with style

2 个答案: