Как сделать круглые кнопки?

Question

[ZAMPOREZKE]

Почему кнопки расползаются и как с эти бороться?

https://codepen.io/anon/pen/KQOOMB

Comments

[Степан Крапивин]

задай ширину и высоту для кнопок, чтобы они не расползались

Answer 1

[Павел Антонов]

Вот вам решение картинку оборачиваете в div и смотрите свойства div'а

Answer 2

[Максим Тимофеев]

• или используй иконки с соотношением сторон 1:1
  
• или вместо картинок блок, картинки на back c этого блока background:cover; и блоку задать width height 1:1
  

ПС: иконки картинками это же преступление против логики. Сделай спрайтом или вообще иконочный шрифт или просто возьми готовое: https://fontawesome.com/

Answer 3

[Дима Долготер]

Надо сделать ширину и высоту одинаковую. не используй картинки. Лучше иконки и на них стили применять

Answer 4

[twobomb]

Чтобы были круглые высота должна быть равна ширине. Типа такого

Comments

[Павел Антонов]

криво картинки растянули

[twobomb]

Павел Антонов, По другому тут никак, только координально все передлывать. Хотя нет, можно увеличить высоту и пропорционально уменьшить верхний и нижний паддинг.