将CSS按钮链接到电子邮件 - 如何完成？ [英] Linking CSS button to email - How can it be done?

问题描述

我想将提交按钮关联为电子邮件地址。但似乎不能让它工作。

对我可能做错了什么建议？

看起来像是第一次检查每当我上传到网站，它不工作= S

这是HTML：

 < a href =mailto：[e-mail]>< input type =submitvalue =Get In Touchname =submitclass =submitid =submit>< / a> 
  

以下是CSS：

  body {
 font-family：'Lucida Grande'，'Helvetica Neue'，Helvetica，Arial，sans-serif; 
 padding：100px; 
 font-size：13px; 
} 
 
 div {
 background：#fff; 
 margin：0 auto; 
 width：200px; 
 padding：100px; 
 text-align：center; 
 / * border-radius * / 
 -webkit-border-radius：5px; 
 -moz-border-radius：5px; 
 border-radius：5px; 
 / * box-shadow * / 
 -webkit-box-shadow：rgba（0,0,0,0.2）0px 1px 3px; 
 -moz-box-shadow：rgba（0,0,0,0.2）0px 1px 3px; 
 box-shadow：rgba（0,0,0,0.2）0px 1px 3px; 
} 
 
 input [type =submit] {
 height：50px; 
 padding：0 48px; margin：10px auto 0 auto; 
 background：＃090a0b; 
 border：0; 
 text-transform：uppercase; 
 font-family：Open Sans; 
 font-size：24px; 
 color：#fff; 
 font-weight：400; 
 cursor：pointer; 
 -webkit-transition：all 0.2s ease; 
 -moz-transition：all 0.2s ease; 
 -o-transition：all 0.2s ease; 
 transition：all 0.2s ease; 
 opacity：1; 
 -webkit-appearance：none; 
 border：solid 1px #fff; 
 -webkit-border-radius：1px; 
 -moz-border-radius：1px; 
 border-radius：1px; 
 background：transparent; 
} 
  

解决方案

如果你真的想使用在< a> 中提交按钮，比您可以使用< a> >

HTML

 < input type = submitclass ='button'value =Mail USonclick =window.location.href ='mailto：[e-mail]'> 
  

CSS

  .button {
 font：bold 11px Arial; 
 text-decoration：none; 
 background-color：#EEEEEE; 
 color：＃333333; 
 padding：2px 6px 2px 6px; 
 border-top：1px solid #CCCCCC; 
 border-right：1px solid＃333333; 
 border-bottom：1px solid＃333333; 
 border-left：1px solid #CCCCCC; 
} 
  

Fiddle HERE ：小提琴

否则可以使用< a> 标记，并覆盖 CSS 。
两种都是很好的方法

I'm trying to link the submit button to be an email address. But can't seem to get it to work.

Any suggestions on what I may be doing wrong?

It looks like it works on first inspection, but whenever I upload it to the site it doesn't work =S

Here is the HTML:

<a href="mailto:[e-mail]"><input type="submit" value="Get In Touch" name="submit" class="submit" id="submit"></a>

Below is the CSS:

body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 100px;
font-size: 13px;
}

div {
background: #fff;
margin: 0 auto;
width: 200px;
padding: 100px;
text-align: center;
/* border-radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}

input[type="submit"] { 
height: 50px; 
padding: 0 48px; margin: 10px auto 0 auto; 
background: #090a0b; 
border: 0; 
text-transform: uppercase; 
font-family: "Open Sans";
font-size: 24px; 
color: #fff; 
font-weight: 400;
cursor: pointer;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
opacity: 1;
-webkit-appearance: none;
border: solid 1px #fff;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
background: transparent;  
}

解决方案

If you really want to use submit button inside <a> than you could use this instead.without <a> tag.

HTML

<input type="submit" class='button' value="Mail US" onclick="window.location.href='mailto:[e-mail]'">

CSS

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
 }

Fiddle HERE: Fiddle

Otherwise you could just use <a> tags instead and cover it with CSS. Both are great approaches

这篇关于将CSS按钮链接到电子邮件 - 如何完成？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！