Как скруглить кнопку css
Перейти к содержимому

Как скруглить кнопку css

  • автор:

Как скруглить кнопку css

Если вы нажмете кнопку «Сохранить», ваш код будет сохранен и вы получите URL, с который вы можете поделиться с другими.

Нажав кнопку «Сохранить», вы соглашаетесь с нашим правила и условия.

Все коды в общих файлах предоставляется пользователями и принадлежат объявлениям.

Все общие файлы становятся общедоступными. Лицензия не применяется.

Любой код может быть удален без предупреждения (если он считается оскорбительным, поврежденным или по любая другая причина).

schoolsw3.com не несет ответственности за любые утраты или повреждения любого рода во время использования предоставленного кода.

Не удалось сохранить код

В коде слишком много символов.

Ваш код был сохранен

Файл был сохранен в:

Сохранить на Google диске

Если у вас есть аккаунт Google, вы можете сохранить этот код на Google диске.

Google попросит вас подтвердить доступ к Google диску.

Сохранить файл на Google диск

Сохранить файл как: Сохранить файл

Открыть файл из Google диска

Если вы сохранили файл на Google диске, вы можете открыть его здесь:

Открыть файл с Google диска

Открыть файл

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

Верстаем круглые кнопки на 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-2024 Русаков Михаил Юрьевич. Все права защищены.

    Закругленные кнопки

    Здесь вы узнаете, как сделать кнопки с закругленными углами при помощи CSS.

    2px 4px 8px 12px 50%

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

    Шаг 1) Добавляем HTML:

          

    Шаг 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

    Радиус границы

    Используйте такие утилиты, как rounded-sm , rounded или rounded-lg , чтобы применить различные размеры радиуса границы к элементу.

    div class="rounded . ">div> div class="rounded-md . ">div> div class="rounded-lg . ">div> div class="rounded-full . ">div>

    Используйте утилиту rounded-full для создания кнопок-таблеток.

    button class="rounded-full . ">Сохранить измененияbutton>

    Используйте rounded-none , чтобы удалить существующий радиус границы элемента.

    button class="rounded-none . ">Сохранить измененияbutton>

    Это чаще всего используется для удаления радиуса границы, который был применен к меньшей контрольной точке.

    Используйте rounded- только для округления одной стороны элемента.

    div class="rounded-t-lg . ">div> div class="rounded-r-lg . ">div> div class="rounded-b-lg . ">div> div class="rounded-l-lg . ">div>

    Используйте rounded- только для скругления одного угла элемента.

    div class="rounded-tl-lg . ">div> div class="rounded-tr-lg . ">div> div class="rounded-br-lg . ">div> div class="rounded-bl-lg . ">div>

    Используйте утилиты rounded- , чтобы установить радиус границы, используя логические свойства, которые сопоставляются с соответствующими углами в зависимости от направления текста.

    div dir="ltr"> div class="rounded-s-lg . ">div> div> div dir="rtl"> div class="rounded-s-lg . ">div> div>

    Вот все доступные утилиты логических свойств цвета границы и их эквиваленты физических свойств в режимах LTR и RTL.

    Класс Слева направо Справа налево
    rounded-s-* rounded-l-* rounded-r-*
    rounded-e-* rounded-r-* rounded-l-*
    rounded-ss-* rounded-tl-* rounded-tr-*
    rounded-se-* rounded-tr-* rounded-tl-*
    rounded-es-* rounded-bl-* rounded-br-*
    rounded-ee-* rounded-br-* rounded-bl-*

    Для большего контроля вы также можете использовать модификаторы LTR и RTL для условного применения определенных стилей в зависимости от текущего направления текста.

    Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover : rounded-lg , чтобы применять утилиту rounded-lg только при hover .

    div class="rounded hover:rounded-lg"> div> 

    Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

    Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: rounded-lg , чтобы применить утилиту rounded-lg только на экранах среднего размера и выше.

    div class="rounded md:rounded-lg"> div> 

    По умолчанию Tailwind предоставляет пять утилит для определения размера радиуса границы. Вы можете изменить, добавить или удалить их, отредактировав раздел theme.borderRadius вашей конфигурации Tailwind.

    tailwind.config.js

    module.exports =   theme:   borderRadius:   'none': '0',  'sm': '0.125rem',  DEFAULT: '0.25rem',  DEFAULT: '4px',  'md': '0.375rem',  'lg': '0.5rem',  'full': '9999px',  'large': '12px',  >  >  > 

    Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

    Если вам нужно использовать одноразовое border-radius value , которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.

    div class="rounded-[12px]"> div> 

    Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.

    Copyright © 2023 Tailwind Labs Inc.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *