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

200

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

198

HTML

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

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

149

HTML

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

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

171

HTML

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

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

189