我为我的 BTEC Media 类(class)制作了一个登陆页面,但我遇到了一个按钮问题。
当我点击号召性用语按钮时,按钮会变长。我试过将最大宽度设置为自动并更改边距,但结果相同。
这是我的 CSS 和 HTML
HTML 代码
<!-- Contact Button Bottom Right-->
<a href="mailto:fake@email.com?subject=Envirma Education | Media Production Unit 6&body=To the attention of sir/madam,
Envirma Education | Media Production Unit 6" class="call-to-action">Click here to contact us! <i class="far fa-envelope-open"></i>
</a>
<!-- End of Contact Call-To-Action-->
CSS 代码
/* Call to Action */
.call-to-action {
background-color:#ffffff;
border:1px solid #ffffff;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
display:inline-block;
font-size:17px;
font-family: 'Roboto, Sans Serif';
text-decoration:none;
color:#000000;
padding:16px 31px;
position: absolute;
display: block;
right: 50px;
bottom: 60px;
text-align: center;
}
.call-to-action a:hover {
background-color:#C6DDF0;
border:1px solid #C6DDF0;
}
.call-to-action a{
text-decoration: none;
color: #ffffff
}
.call-to-action:hover {
background-color:#C6DDF0;
}
.call-to-action:active {
position:relative;
top:1px;
}
感谢阅读和提供的任何帮助。 这可能是一个非常简单的解决方案,但我对编程还很陌生,无法在网上找到与我的确切问题相关的任何结果。
最佳答案
您的事件 anchor 类将您的按钮发送到顶部 1 像素。只需删除它,它就不再跳跃了。也许您打算在单击时将按钮降低 1px。如果是这样,请尝试将 margin-top 增加 1px:
.call-to-action {
background-color: #ffffff;
border: 1px solid #ffffff;
-moz-border-radius: 28px;
-webkit-border-radius: 28px;
border-radius: 28px;
display: inline-block;
font-size: 17px;
font-family: 'Roboto, Sans Serif';
text-decoration: none;
color: #000000;
padding: 16px 31px;
position: absolute;
display: block;
right: 50px;
bottom: 60px;
text-align: center;
}
.call-to-action a:hover {
background-color: #C6DDF0;
border: 1px solid #C6DDF0;
}
.call-to-action a {
text-decoration: none;
color: #ffffff
}
.call-to-action:hover {
background-color: #C6DDF0;
}
.call-to-action:active {
position: relative;
}
<a href="mailto:fake@email.com?subject=Envirma Education | Media Production Unit 6&body=To the attention of sir/madam,
Envirma Education | Media Production Unit 6" class="call-to-action">Click here to contact us! <i class="far fa-envelope-open"></i>
</a>
关于html - 点击按钮跳转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55230984/