Как сделать кнопку полностью кликабельной?

Question

[Артём Цымбалюк]

Как сделать так что бы кнопка по всей ширине и высоте была кликабельной?
А то она кликабельная только тогда, когда наводишь на текст
codepen.io/anon/pen/bZzqrp

Answer 1

[Андрей Верх]

display:block

Comments

[Артём Цымбалюк]

Андрей Верх а почему Дядь Серёжа добавляет display:inline-block и у него тоже работает? В чём разница если я добавлю блок и если добавлю инлайновый блок?

[Андрей Верх]

Артём Цымбалюк: инлайн-блок уместнее вешать на ссылку, если ширина именно ей будет задаваться. А в данном примере, проще задать block

Answer 2

[Дядя Серёжа]

Добавь ссылке следующие стили

display: inline-block
width: 100%

Comments

[Артём Цымбалюк]

Дядя Серёжа а почему Андрей Верх добавляет display:block и у него тоже работает? В чём разница если я добавлю блок и если добавлю инлайновый блок?

Answer 3

[Алекс Глебов]

codepen.io/SkiperX/pen/mEvWGb

Answer 4

[zooks]

Нормальная практика:
<a href="#" class="btn-order">Перезвоните мне</a>

.btn-order
  display: inline-block
  width: 165px
  height: 47px
  border: 2px solid #31363c
  border-radius: 2px
  line-height: 47px
  text-align: center
  text-decoration: none
  color: #31363c