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

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

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

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

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

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

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

Шаг 2) Добавляем CSS:

Добавляем кнопке закругленные углы при помощи свойства border-radius :

 .button < background-color: #04AA6D; border: none; color: white; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; >.button1 .button2 .button3 .button4 .button5

Верстаем круглые кнопки на CSS3.

Здравствуйте, дорогие читатели. Мы уже изучили многие свойства, которые появились в CSS3, но просто их знать мало. Нужно обязательно практиковаться! И вот сегодня я покажу, как создать круглые кнопки на CSS3.

Откроем файл index.html и создадим простенькую структуру

Ничего особенного. Просто 3 блока с классом .button Перейдём теперь к стилям.

body background: url(http://subtlepatterns.com/patterns/extra_clean_paper.png);
>

.button display: inline-block;
margin: 40px;
width: 100px;
height: 100px;
background: url(http://subtlepatterns.com/patterns/extra_clean_paper.png);
cursor: pointer;
border-radius: 50%;

box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
inset 0 0 20px rgba(0,0,0,.1);
>

Фон для документа и наших кнопок я взял с сайта subtlepatterns.com.

Мы делаем наши div строчно-блочными, чтобы они выстроились по горизонтали, задаём им высоту, ширину, отступ от краёв браузера, скругление 50%, чтобы получить круг, и при наведении курсор делаем pointer. Здесь нет ничего сложного, но тень я не зря отделил в стилях, т.к. это именно та часть, которая может вызвать затруднения, хотя, там тоже всё просто, и это вы сейчас увидите.

Задав первую тень, мы уже увидим контур нашего круга:

box-shadow: 0 3px 20px rgba(0,0,0,.25);

Затем мы задаём внутреннюю тень, чтобы у нас сверху появилась такая оконтовочка, и кнопка стала более объёмной.

box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6);

Следующая внешняя тень нужна для того, чтобы немного затемнить место под кнопкой снизу, а следующая внутренняя затемняет пространство внутри кнопки для пущего эффекта)

box-shadow: 0 3px 20px rgba(0,0,0,.25),
inset 0 2px 0 rgba(255,255,255,.6),
0 2px 0 rgba(0,0,0,.1),
inset 0 0 20px rgba(0,0,0,.1);

Как видите, по-началу кажется сложно, много свойств, но, если разобраться, то всё оказывается намного проще. Итак, вот наш конечный результат:

Теперь реализуем поведение при наведении на блок

.button:hover box-shadow: inset 0 0 20px rgba(0,0,0,.2),
0 2px 0 rgba(255,255,255,.4),
inset 0 2px 0 rgba(0,0,0,.1);
>

Мы уже разобрались с тенями в блоке, а теперь попробуйте разобраться сами с тем, что происходит при наведении. Точно так же оставьте только одну тень и посмотрите, что происходит, а затем добавьте вторую и посмотрите, что изменилось, и так далее.

Наконец, давайте добавим иконки нашим кнопкам, чтобы было не очень скучно. Для этого изменим немного html

Мы просто добавили дополнительный класс для каждой кнопки и теперь давайте зададим стили для них

.btn-photo background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32×32-preview/public/field/image/MD-camera-photo_0.png) center center no-repeat;
>

.btn-settings background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32×32-preview/public/field/image/settings.png) center center no-repeat;
>

.btn-tag background: url(http://defaulticon.com/sites/default/files/styles/icon-front-page-32×32-preview/public/field/image/tag.png) center center no-repeat;
>

Здесь мы просто добавляем второй фон для каждой кнопки, взяв иконки с сайта defaulticon.com.

Вот и всё. Сегодня мы рассмотрели, как создать круглые кнопки на CSS3.

Создано 05.05.2014 13:55:57

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 5 ):

gordon 23.05.2014 16:15:12

Симпатично и работает во всех основных браузерах

alexandrdante 23.05.2014 16:46:30

в современных версиях — во всех. а так. старые версии ie не поддерживают border-radius

sergkosm 08.10.2014 00:55:56

opera квадрат показала, второй раз открыл — норм)

tikkiwiki 08.10.2014 09:46:23
[email protected] 11.08.2017 01:52:35

Здравствуйте. Возник вопрос насчет адреса картинки. Такой код у меня отлично сработал: background: url(http://test.ru/image.jpeg); А вот такой нет: background: url(image.jpeg); Почему не сработал второй? Ведь картинка лежит в корне, а не в папке.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

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

Если кнопка расположена на белом фоне, то следует удалить стили .circle::before , т.к. они добавляют белую обводку у рамки.

border-radius : 50% ;
height : 140px ;
width : 140px ;
box-sizing : content-box ;
background-color : #fff ;
padding : 20px ;
position : relative ;
box-shadow : inset -20px 20px 20px rgba ( 0,0,0,.2 ) , -20px 20px 30px rgba ( 0,0,0,.3 ) ;
display : inline-block ;
margin : 20px auto ;
.circle::before < position : absolute ; box-shadow : inset -2px 2px 2px #fff ; border-radius : 50% ; display : flex ; align-items : center ; justify-content : center ; box-shadow : inset -3px 3px 6px rgba ( 0, 0, 0, .3 ) ; background : #337AB7 ; /* Фон кнопки */ color : #fff ; text-decoration : none ; font-size : 24px ; letter-spacing : 1px ; font-weight : bold ; text-transform : uppercase ; font-family : 'Roboto' , sans-serif ; transition : all .3s ease-in-out ; a:hover .inner < background : #BFE2FF ; /* Фон кнопки при наведении */ color : #337AB7 ; Нравится 3 В закладки

• Опубликовано: 08.05.2020
• Рубрики: Тексты, ссылки и кнопки — простые решения
• Метки: CSS
• 9477 просмотров

Смотрите также:

Background для текста

Наложение графического или градиентного фона на текст

Обтекание картинки текстом

CSS-свойство shape-outside для обтекания текстом изображения на прозрачном фоне

Смежные кнопки на CSS

Вариант оформления смежных кнопок с меняющейся шириной