如何将按钮链接到电子邮件地址

Question

我有一个按键（使用CSS样式）。HTML长这样：

<div class="button">Kontakt</div> 

现在我想把按钮链接到一个电子邮件地址。下面的解决方案没有起作用。它会在按钮中显示电子邮件地址（[e-mail]）作为文本。

<div class="button"><a href="mailto:[e-mail]">Kontakt</a></div> 

标签作为内部HTML元素的解决方案也不起作用：

<a href="mailto:[e-mail]"><div class="button">Kontakt</div></a>

有什么办法可以在按钮上显示“联系我们”，并链接到电子邮件地址？

- tom84

---

不需要div。将您的按钮CSS也应用于a元素，然后执行<a class='button' .... - Pekka

<a class="button" href="mailto:[e-mail]">联系我们</a> 这可能会对你有所帮助[http://stackoverflow.com/questions/18626755/linking-css-button-to-email-how-can-it-be-done] - SR1092

Answer 1

只需编写

<a class="button" href="mailto:[e-mail]">Kontakt</a>

- user1789997

---

谢谢你的回答，当我这样做时，我再也看不到按钮了。 当我查看Chrome开发人员工具或Firebug时，我看到一个新类{{link1：[e-mail]}} 但我不知道为什么...那一定是某种垃圾邮件保护吗？ - tom84

很遗憾我们失去了语义，因为它看起来像一个按钮，而不是一个链接。 - Vitaly Zdanevich

Answer 2

简单的解决方法是使用 a 元素将按钮包裹起来。

<a href="mailto:[e-mail]">
<button class="button">Kontakt</button>
</a>

- Slobodan Draksimovic

Answer 3

.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

<a class="btn" href="mailto:[e-mail]">Get In Touch</a>

- solimanware

Answer 4

使用<a>标签。

<a href="mailto:[e-mail]" class="mail-button">Kontakt</a>

并添加CSS使<a>标签看起来像按钮。

- Ajay

Answer 5

只需在您的HTML文件中编写此内容

<a href="mailto:[e-mail]">Kontakt</a>

对于 CSS，请添加以下内容

a {
    text-decoration: none; /* to hide the underline */
}
a:visited {
    /* this will style the button after clicking for example the color of the text */
    color: white; /* change it to the text color in your normal style */
}
a:hover {
    /* the style here will appear when the mouse is over the button */
    /* this will help you to make it act like a real button */
}

或者在按钮标签中添加onclick，并在其中添加一些JavaScript代码，例如：

<button onclick="window.open('mailto:[e-mail]');">Kontakt</button>

- Khaled Al-Ansari

---

当我使用Chrome尝试时，这会打开一个新窗口。 - sarora