Закругленные кнопки
Здесь вы узнаете, как сделать кнопки с закругленными углами при помощи 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
Верстаем круглые кнопки на 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.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - 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
hod1234hod@yahoo.com 11.08.2017 01:52:35
Здравствуйте. Возник вопрос насчет адреса картинки. Такой код у меня отлично сработал: background: url(http://test.ru/image.jpeg); А вот такой нет: background: url(image.jpeg); Почему не сработал второй? Ведь картинка лежит в корне, а не в папке.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.
Saved searches
Use saved searches to filter your results more quickly
Cancel Create saved search
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Сделать истинно круглой кнопку #2
Как сделать круглую кнопку со значком по центру?
И мне нужно сделать ровный круг с иконкой ровно по центру
Уточню что некоторые иконки не симметричны и имеют не правильные пропорций
изо чего хоть программно они и находятся по центру но визуально нет и нужно как то их подвинуть
Я знаю что можно сделать так
a < color:#fff; background:#0f0; padding:10px; border-radius:100%; position:relative; font-size:40px >a:before
Но тогда придется при изменений padding или font-size постоянно подгонять top: и left: что мне не подходит.
Есть ли у кого идеи как сделать так что бы буква столовалась на том же месте относительно круга?
- Вопрос задан более трёх лет назад
- 1839 просмотров