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

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

Для создания такой кнопки удобнее воспользоваться элементом <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>
Формы