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

Круглая кнопка обычно используется в тех случаях, когда вместо текста на кнопке выводится иконка или одиночный символ. Вот некоторые ситуации, где использование круглых кнопок имеет смысл: навигация по страницам; управление аудио и видеоплеером, переключение между слайдами в карусели, отправка формы.

Для создания такой кнопки удобнее воспользоваться элементом <button>, поскольку он позволяет вставлять непосредственно текстовый символ или картинку. Вот как на кнопке отобразить картинку в формате SVG.

<button class="round">
  <img src="image/search.svg" width="16" height="16" alt="Поиск">
</button>

Чтобы кнопка получилась именно круглой, в стилях для класса .round следует установить одинаковые ширину и высоту и задать радиус скругления 50% через свойство border-radius. Скругление каждого уголка на половину размера элемента и даст в итоге круг. У кнопки следует ещё убрать рамку через свойство border, её браузеры добавляют по умолчанию.

button.round {
 width: 30px; height: 30px; /* Размеры кнопки */
 background-color: #e03e25; /* Цвет фона */
 border-radius: 50%; /* Радиус скругления */
 border: none; /* Убираем рамку вокруг кнопки */
}

Само выравнивание картинки внутри <button> по вертикали или горизонтали делать не нужно, она и так окажется в центре кнопки. Окончательный код с полем для поиска и круглой кнопкой для отправки формы показан в примере 1.

Пример 1. Круглая кнопка

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Кнопка</title> <style> input[type=search] { height: 30px; } button.round { width: 30px; height: 30px; /* Размеры кнопки */ background-color: #e03e25; /* Цвет фона */ border-radius: 50%; /* Радиус скругления */ border: none; /* Убираем рамку вокруг кнопки */ vertical-align: top; /* Выравнивание по верху */ } </style> </head> <body> <form action="handler.php"> <input type="search" name="search"> <button class="round"> <img src="image/search.svg" width="16" height="16" alt="Поиск"> </button> </form> </body> </html>