2
votes

Bouton sautant au clic

J'ai créé une page de destination pour mes cours BTEC Media, mais j'ai rencontré un problème avec un bouton.

Lorsque je clique sur mon bouton d'appel à l'action, le bouton s'allonge. J'ai essayé de définir max-width sur auto et de modifier les marges mais le même résultat.

Voici mon CSS et HTML

HTML Code p >

/* 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;
}

Code CSS

<!-- 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-->

Merci pour la lecture et toute aide fournie. Cela peut être une solution très simple, mais je suis assez novice en programmation et je n'ai trouvé aucun résultat en ligne concernant mon problème exact.

Photo du bouton agrandissant la largeur au clic.

html css css-position

0 commentaires

3 Réponses :

0
votes

Votre classe d'ancrage active envoyait votre bouton vers le 1px supérieur. Supprimez simplement cela et il ne saute plus. Peut-être que vous vouliez supprimer le bouton de 1px lorsque vous cliquez dessus. Si tel est le cas, essayez d'augmenter la marge supérieure de 1 px:

<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>

.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;
}

0 commentaires

0
votes

Supprimez simplement le positionnement sur la classe d'ancrage active.

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

0 commentaires

0
votes

Suppression de l'ancre suivante et retrait de la balise top car elle était déplacée lors du clic / actif.

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

Merci à MichaelvE pour la réponse .

0 commentaires