Button Jumping On Click - html

Question

I've made a landing page for my BTEC Media coursework, but I've ran into an issue with a button.
When I click on my call to action button the button grows in length. I've tried setting max-width to auto and altering margins but the same result.
Here is my CSS and HTML
HTML Code
<!-- 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 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;
}
Thanks for reading and any help provides.
This may be a really easy solve but I'm fairly new to programming and couldn't find any results online relating to my exact problem.
Photo of button expanding width on click.

Answer 1

Your active anchor class was sending your button to the top 1px. Just remove that and it no longer jumps. Perhaps you meant to drop the button by 1px when clicked. If so, try increasing the margin-top by 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>

Answer 2

Just remove the positioning on the active anchor class.
.call-to-action:active {
position:relative;
}

Answer 3

Removed the following anchor and took out the top tag as it was moving it on click/active.
.call-to-action:active {
position: relative;
}
Thanks to MichaelvE for the response.