I recently created a landing page for my BTEC Media coursework, but I encountered an issue with a button.
Whenever I click on my call-to-action button, it inexplicably increases in length. I've attempted adjusting the max-width to auto and tweaking margins, however, the problem persists.
Below are snippets of my CSS and HTML code:
HTML Code
<!-- Contact Button Bottom Right-->
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="335552585673565e525a5f1d505c5e">[email protected]</a>?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 Code
/* 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;
}
Thank you for taking the time to read this. Any assistance is greatly appreciated. I understand that this might have a simple solution, but as a beginner in programming, I couldn't locate any resources online that address my specific issue.