HTML电子邮件按钮

Question

这里很新，所以我确信我缺少了一些明显的东西，但我想要一个HTML按钮，它可以打开一个预填充了To:字段的用户本地电子邮件客户端。

<form>
<button class="button-21"  action="mailto:[e-mail]" type="submit"> Contact</button>
</form> 

这是附带的CSS:

.button-21 {
align-items: center;
appearance: none;
background-color: #3eb2fd;
background-image: linear-gradient(1deg, #4f58fd, #149bf3 99%);
background-size: calc(100% + 20px) calc(100% + 20px);
border-radius: 100px;
border-width: 0;
box-shadow: none;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
display: inline-flex;
font-family: CircularStd, sans-serif;
font-size: 1rem;
height: auto;
justify-content: center;
line-height: 1.5;
padding: 6px 20px;
position: relative;
text-align: center;
text-decoration: none;
transition: background-color 0.2s, background-position 0.2s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: top;
white-space: nowrap;
}
.button-21:active,
.button-21:focus {
outline: none;
}
.button-21:hover {
background-position: -20px -20px;
}
.button-21:focus:not(:active) {
box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 0.125em;

Answer 1

操作是表单的提交属性。您应该将action属性从按钮移动到窗体中。

.button-21 {
align-items: center;
appearance: none;
background-color: #3eb2fd;
background-image: linear-gradient(1deg, #4f58fd, #149bf3 99%);
background-size: calc(100% + 20px) calc(100% + 20px);
border-radius: 100px;
border-width: 0;
box-shadow: none;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
display: inline-flex;
font-family: CircularStd, sans-serif;
font-size: 1rem;
height: auto;
justify-content: center;
line-height: 1.5;
padding: 6px 20px;
position: relative;
text-align: center;
text-decoration: none;
transition: background-color 0.2s, background-position 0.2s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: top;
white-space: nowrap;
}
.button-21:active,
.button-21:focus {
outline: none;
}
.button-21:hover {
background-position: -20px -20px;
}
.button-21:focus:not(:active) {
box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 0.125em;
}

<form action="mailto:[e-mail]">
<button class="button-21" type="submit">Contact</button>
</form>

Answer 2

试试这个：(

<form>
<button class="button-21"  onclick="location.href='mailto:[e-mail]';" type="button"> Contact</button>
</form> 

Answer 3

除了表单中的按钮外，您还可以使用以下链接：

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

Answer 4

<form action="mailto:[e-mail]">
<button class="button-21"   type="submit"> Contact</button>
</form>