CSS :active не срабатывает при нажатии на кнопку

165
18 февраля 2019, 00:20

Не хочет нажиматься кнопка "Связаться" (анимироваться (:active)). Проблема скорее всего с использованием nav и div, но я в упор не пойму, где косяк. Заранее благодарен за понимание и подсказку.

body { 
  font-family: 'K2D', sans-serif; 
} 
 
nav li { 
  border: 2px solid #204156;  
  border-radius: 15px; 
  display: inline; 
  float: right; 
  margin: 20px; 
  margin-top: 0px; 
  padding: 5px;   
} 
 
.btn { 
  background: #51d132; 
  display: inline-block; 
  padding: 0 60px; 
  line-height: 40px; 
  font-size: 20px; 
  border-radius: 20px; 
  cursor: pointer; 
  border-bottom: 4px solid #1e5111; 
  transition: .3s; 
} 
 
.btn:hover { 
  background: #3daa22; 
} 
 
.btn:active { 
  top: 2px; 
}
<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <meta name="viewport" content="width=device-width"> 
	<title>Понятное дело</title> 
  <link ref="https://fonts.googleapis.com/css?family=K2D" rel="stylesheet"> 
</head> 
<body> 
  <h4>Заголовок</h4> 
  <nav> 
    <ul> 
      <li><a href="#">Обо мне</a></li> 
      <li><a href="#">Галерея</a></li> 
      <li><a href="#">Контакты</a></li> 
    </ul>   
  </nav> 
  <h1>Текст!</h1> 
  <p>Еще текст.</p> 
  <div class="btn"><a>Связаться</a></div> 
</body> 
</html>

Answer 1

top, right, bottom, left работает только если у елемента заданно свойство position.

body { 
  font-family: 'K2D', sans-serif; 
} 
 
nav li { 
  border: 2px solid #204156;  
  border-radius: 15px; 
  display: inline; 
  float: right; 
  margin: 20px; 
  margin-top: 0px; 
  padding: 5px;   
} 
 
.btn { 
  background: #51d132; 
  display: inline-block; 
  padding: 0 60px; 
  line-height: 40px; 
  font-size: 20px; 
  border-radius: 20px; 
  cursor: pointer; 
  border-bottom: 4px solid #1e5111; 
  transition: .3s; 
  /**/ 
  position: relative; 
} 
 
.btn:hover { 
  background: #3daa22; 
} 
 
.btn:active { 
  top: 2px; 
}
<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <meta name="viewport" content="width=device-width"> 
	<title>Понятное дело</title> 
  <link ref="https://fonts.googleapis.com/css?family=K2D" rel="stylesheet"> 
</head> 
<body> 
  <h4>Заголовок</h4> 
  <nav> 
    <ul> 
      <li><a href="#">Обо мне</a></li> 
      <li><a href="#">Галерея</a></li> 
      <li><a href="#">Контакты</a></li> 
    </ul>   
  </nav> 
  <h1>Текст!</h1> 
  <p>Еще текст.</p> 
  <div class="btn"><a>Связаться</a></div> 
</body> 
</html>

READ ALSO
Как вытащить угол поворота из matrix3d?
HTML

Как вытащить угол поворота из matrix3d?

У блока задается поворот через matrix3dКак вытащить угол поворота по каждой оси?

 159
Как изменить ползунки слайдера?
HTML

Как изменить ползунки слайдера?

Есть слайдер с измененными ползунками (clip-path)Как можно сделать так, чтобы при максимальном сведении ползунков, "стрелки" ползунков смещались...

 106
Как поменять ширину отдельной ячейки
HTML

Как поменять ширину отдельной ячейки

Есть таблица, ширина первого столбца 30pxНужно сделать ячейку 1а шириной 50px, оставив при этом остальную структуру неизменной

 124
Веб-шрифт мылит
HTML

Веб-шрифт мылит

Подскажите, пожалуйста, хочу на сайте использовать шрифт Raleway, скачал с github последнюю версию, конвертировал через Transfonter (через Font Squirrel аналогично)Подключил...

 145