我的网站上有一个使用以下代码的联系按钮,但是该按钮没有打开所需的电子邮件页面。我想知道是否有人可以帮助我重写代码以使其正常工作。
我希望保留现有的样式和ID。基本上,我不能让它很难过。
#contact-button{
border: none;
color: white;
padding-top: 7px;
padding-right: 33px;
padding-left: 28px;
padding-bottom: 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-style: lato;
font-size: 20px;
margin-top: 4px;
margin-right: 2px;
margin-left: 245px;
margin-bottom: 4px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
opacity: 0.90;
border-radius: 3px;
}
#contact-button {
background-color: #F06000;
color: white;
}
#contact-button:hover {
color: white;
background-color: #A74200;
}
#mail-icon{
margin-top: 6px;
float: left;
margin-right: 6px;
}
<a href="mailto:#" id="contact-button">Message Me
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA3ElEQVQ4T6WTaw3CQBCEZxzgAHCAhEpAQnGAlKIAcIADQAFIQAIOhsxmr2lKQ0q7fy697Hw3+ygxMzhTD0qqAGgqyACLXwDOf0JqAEsDbgkQyd0YiKRT5q0CQLKStAfgcmqS7yGQpAWAI4A7ySa0BWCBJNsKUB+S4iuAA8lw8AXIyw2AxiCSz86dRXYXd2MAtmtHDotdVgsdBHRLSOElz22ebngzWEI20fb9SjQx60bv2+U9SB7aHuQYnVgs/5xmjtH7sy6L5MYUu2NWwTl+LPbAs58c83+myU+n8AOSyY9qfRA3mgAAAABJRU5ErkJggg==" alt="Mail Icon" id="mail-icon" />
</a>
最佳答案
只需删除mailto之前的空格:mailto: joebloggs@gmail.com
应该mailto:joebloggs@gmail.com
SNIPPET
#contact-button{
border: none;
color: white;
padding-top: 7px;
padding-right: 33px;
padding-left: 28px;
padding-bottom: 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-style: lato;
font-size: 20px;
margin-top: 4px;
margin-right: 2px;
margin-left: 245px;
margin-bottom: 4px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
opacity: 0.90;
border-radius: 3px;
}
#contact-button {
background-color: #F06000;
color: white;
}
#contact-button:hover {
color: white;
background-color: #A74200;
}
#mail-icon{
margin-top: 6px;
float: left;
margin-right: 6px;
}
<a href="mailto:joebloggs@gmail.com" id="contact-button">Message Me
</a>