Создадим стильную, адаптивную и безопасную кнопку с возможностью добавления иконок!

📌 HTML

<button class="button">     <span>Кнопка</span> </button>

📌 Текст оборачиваем в <span> — это защитит его от смещения при добавлении иконки.

🎨 CSS

.button {     display: inline-flex;     align-items: center;     justify-content: center;     gap: 8px; / Отступ между текстом и иконкой /     padding: 12px 22px;     font-family: sans-serif;     font-size: 18px;     line-height: 120%;     letter-spacing: 0.03em;     font-weight: 400;     color: #fff;     cursor: pointer;     user-select: none;     background-color: #29be53;     border: none;     border-radius: 12px;     transition: 0.2s; }

.button svg {     flex-shrink: 0; / Иконка не сжимается /     width: 18px;     height: 18px; }

.button:hover {     background-color: #167832; }

.button:active {     background-color: #0f5623; }

🛠️ Как это работает? ✔️ inline-flex позволяет выровнять контент внутри кнопки. ✔️ gap — автоматически регулирует отступы, независимо от наличия иконки. ✔️ flex-shrink: 0 для SVG защищает иконку от деформации. ✔️ transition создаёт плавные эффекты при наведении и нажатии.

🖼 Добавляем иконку

<button class="button">     <svg>...</svg>     <span>Кнопка</span> </button>

📌 Иконку можно разместить слева или справа без изменения отступов!

💡 Пример на CodePen: 🔗 Живой пример