Как сделать выпуклую кнопку css

Верстаем круглые кнопки на 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.

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

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

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

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

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

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

Она выглядит вот так:

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

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

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

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

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

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

Как сделать кнопку с фоном изображения?

Я использую bootstrap 3 и хочу создать кнопку image , т.е. кнопка должна иметь:

  • фон изображения
  • Кнопка должна иметь настраиваемый полупрозрачный темный оверлей, который светлеет при наведении курсора и становится еще темнее при нажатии.
  • фиксированная высота (300 пикселей) и ширина 100% (чтобы он занимал весь родительский элемент div ).
  • Изображение должно быть cropped т.е. overflow: hidden

Я попытался добиться этого, установив изображение в качестве фона для моего родительского <div> и используя дочерний <div> для полупрозрачных оверлеев. Но мне пришлось написать много jquery, чтобы изменить состояния onhover, onclick и т. Д.

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

Javascript: (в идеале js не должно быть, все это нужно делать в CSS)

Кроме того, я все равно использую SCSS, поэтому ответы SCSS и CSS в порядке.

Как сделать кнопку с эффектом нажатия с помощью CSS

CSS3 многократно расширил возможности оформления сайта. Теперь возможны самые разнообразные эффекты без применения сторонних скриптов: передвижение, вращение, цветовое разнообразия.
Именно благодаря CSS3 стало возможным сделать невероятно красивые кнопки только с помощью стилей. Теперь, чтобы из ссылки сделать полноценную анимационную кнопку достаточно будет просто указать нужный класс стиля.
Предлагаю Вашему внимание одно из простейших исполнений кнопки с эффектом нажатия.
Button 1Button 2
Для начала рассмотрим HTML и CSS этих кнопок

Кнопка создается из ссылки путем добаления классов.
push_but это класс отвечающий за стили и анимацию кнопки;
red &#8211; стили красной кнопки;
yellow &#8211; стили желтой кнопки;

А вот и CSS стили кнопок. Их Вам нужно скопировать в css файл Вашего сайта.

Изменения цвета кнопки с эффектом нажатия

Хочу Вам рассказать как добавить свои цвета для этой кнокпи. Для этого в качестве примера будем создавать зеленый цвет кнопки. Итак вот шаги, которые вам нужно будет предпринять для того,чтобы создать свой цвет кнопки:

  1. Скопировать полностью все классы отвечающие за цвет, например класс red. Для этого копируем .red и все его содержимое, которое в фигурных скобках и .red:hover со всем его содержимым фигурных скобках . Помещаем скопированое содержимое в блокнот в текстовый файл.
  2. Первым делом нужно изменить названия классов CSS. Например, для нашего примера назовем новый класс green.
    В блокноте нажимаете Правка &#8211; Заменить (CTRL+H).

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

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