CODEWITHSUNDEEP
htmlcsscss-position
Ben Green
Ben Green

Reputation: 31

Button Jumping On Click

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:[email protected]?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.

Upvotes: 3

Views: 3401

Answers (3)

Ben Green
Ben Green

Reputation: 31

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.

Upvotes: 0

yacine benzmane
yacine benzmane

Reputation: 4188

Just remove the positioning on the active anchor class.

.call-to-action:active {
    position:relative;
    }

Upvotes: 0

MichaelvE
MichaelvE

Reputation: 2578

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:[email protected]?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>

Upvotes: 1

Related Questions