Кнопка прыгает при нажатии - PullRequest
Новая
       7

Кнопка прыгает при нажатии

2 голосов
/ 19 марта 2019

Я создал целевую страницу для своей курсовой работы BTEC Media, но у меня возникла проблема с кнопкой.

Когда я нажимаю на кнопку призыва к действию, длина кнопки увеличивается. Я попытался установить максимальную ширину в авто и изменить поля, но результат тот же.

Вот мои 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;
}

Спасибо за чтение и любую помощь. Это может быть действительно легко решить, но я довольно новичок в программировании и не могу найти никаких результатов онлайн, касающихся моей точной проблемы.

Фотография ширины кнопки при нажатии.

Ответы [ 3 ]

0 голосов
/ 19 марта 2019

Просто удалите позиционирование на активном классе привязки. 

.call-to-action:active {
    position:relative;
    }
0 голосов
/ 19 марта 2019

Удалил следующий якорь и убрал тег top, так как он двигался по клику / активен. 

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

Спасибо MichaelvE за ответ.

0 голосов
/ 19 марта 2019

Ваш активный якорный класс отправлял вашу кнопку на вершину 1px. Просто удалите это, и он больше не прыгает. Возможно, вы хотели сбросить кнопку на 1 пиксель при нажатии. Если это так, попробуйте увеличить маржу на 1 пиксель: 

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