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

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

  • автор:

Оформление кнопок

Через CSS к любой кнопке применяются следующие параметры оформления: ширина и высота, фон, рамку, цвет и размер текста и др. Также к самим кнопкам и к тексту на них можно добавить тень.

Ширина и высота кнопки

Размеры кнопки явно устанавливать обычно необходимости нет, потому что кнопки автоматически подстраивают свой размер под имеющийся текст или изображение. Тем не менее, иногда в угоду дизайну приходится указывать ширину и высоту кнопки через соответствующие свойства width и height (пример 1).

Пример 1. Размеры кнопки

Также на размер кнопки можно косвенно влиять через свойство padding. Оно добавляет пространство вокруг текста, расширяя кнопку по вертикали и горизонтали (пример 2).

Пример 2. Использование padding

Здесь у свойства padding два значения: первое устанавливает пространство вокруг текста по вертикали, второе по горизонтали.

Параметры текста

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

Пример 3. Текст на кнопке

Рамка

Для управления параметрами рамки применяется свойство border и его производные: border-width, border-style и border-color. В примере 4 класс .btn устанавливает основные параметры кнопки, в том числе толщину, стиль и цвет рамки. Для расширения набора кнопок в пример включены дополнительные классы, меняющие цвет рамки и текста. Таким образом, к достаточно добавить класс .btn и класс с нужным цветом, например, .info .

Пример 4. Цветные рамки у кнопки

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

Скругление углов

За скругление уголков у рамок отвечает свойство border-radius, в качестве его значения указываются любые единицы размера из CSS, например, em, rem, пиксели, проценты и др. В примере 5 у кнопок радиус установлен как 0.4em .

Пример 5. Скруглённые уголки у кнопок

Разные значения border-radius дают и различную форму кнопок. В табл. 1 приведён вид кнопок, получаемый в зависимости от радиуса скругления.

Табл. 1. Значения радиуса скругления

Значение border-radius Описание Вид кнопки
0.5em Такое значение устанавливает одинаковый радиус скругления у всех уголков кнопки. Кнопка
5em Любое большое значения радиуса, превышающее половину высоты кнопки, превращает кнопку в подобие пилюли. Кнопка
50% Процентная запись устанавливает разные значения радиуса по горизонтали и вертикали, поскольку проценты берутся отдельно от ширины и высоты кнопки. В итоге получается овальная кнопка. Кнопка
0.8em 0 0.8em 0 Четыре значения позволяют установить радиус каждого уголка кнопки независимо. Отсчёт начинается от левого верхнего угла и идёт по часовой стрелке. Кнопка

Фон

В примерах выше цвет фона делался прозрачным через свойство background-color со значением transparent . Аналогично устанавливается и произвольный цвет фона. Учтите, что у цветных кнопок сохраняется рамка по умолчанию, которая при желании убирается через свойство border-width или через свойство border-style со значением none . В примере 6 вводится несколько стилевых классов для кнопок, меняющих их цвет. К элементу достаточно добавить класс .btn и одновременно класс с желаемым цветом фона, например, .success .

Пример 6. Использование background-color

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

Цветной фон допустимо комбинировать с цветной рамкой, получая разные вариации кнопок. В примере 7 рамка у кнопки сперва убирается, а затем к кнопке добавляется цветная линия снизу через свойство border-bottom.

Пример 7. Сочетание фона и линии

Градиентный фон

Вместо однотонного цветного фона для кнопок можно установить градиент через свойство background-image и функцию linear-gradient(). Например, для вертикального градиента от красного к синему цвету пишем следующее:

button

Для горизонтального градиента слева направо добавится ещё один параметр to right:

button

Вместо названия цветов или шестнадцатеричных значений цвет удобно задавать в формате rgba() . Тогда оставляя цвет исходным мы только меняем значение прозрачности. Здесь вместо оранжевого цвета #f79103 используется его аналог rgb(247, 145, 3), для начального и конечного цветов задана прозрачность 0.2.

linear-gradient( rgba(247, 145, 3, 0.2), rgb(247, 145, 3), rgba(247, 145, 3, 0.2) );

В примере 8 представлены градиентные кнопки для разных ситуаций, цвет которых задан через rgba() . Для контрастного выделения кнопок к ним, также, добавлена рамка соответствующего цвета.

Пример 8. Градиентные кнопки

Добавление тени

Как и к любому блоку, к легко добавляется тень через свойство box-shadow. У него четыре основных параметра: первые два отвечают за смещение тени, третий устанавливает её размытие, а четвёртый цвет тени. Так, для создания равномерной полупрозрачной тени вокруг кнопки используем следующую запись.

button

Для тени не вокруг кнопки, а внутри неё, добавляется параметр inset .

button

В примере 9 приведены несколько кнопок с разными параметрами box-shadow , дающими непохожие друг на друга тени.

Пример 9. Кнопки с тенью

Генератор различных теней вы можете увидеть здесь: front-end-tools.com/en/generateboxshadow/

Итоги

  • Ширина и высота кнопки устанавливаются непосредственно через свойства width и height. Также на размер влияет свойство padding, оно задаёт расстояние от текста до края кнопки.
  • Параметры рамки меняются с помощью свойства border, которое определяет толщину, стиль и цвет линии. Для скругления уголков рамки добавляется свойство border-radius.
  • Цвет фона кнопки задаётся через свойство background-color, для градиентного фона применяется свойство background-image с функцией linear-gradient().
  • Тень к кнопке добавляется через свойство box-shadow.

Как сделать кнопку в html css? Красивые кнопки для сайта с примерами

Приветствую! В этой статье хочу поговорить про кнопки, на мой взгляд один из важнейших элементов в дизайне сайтов и приложений. Ведь, в большинстве случаев, кнопки нужны для того, чтобы заставить пользователя выполнить какое-либо действие (подписаться на рассылку, добавить товар в корзину, оставить комментарий, заказать обратный звонок и т.д.), которое можно так или иначе монетизировать. Мы же здесь не просто так собрались 😉

Итак из этой статьи вы узнаете:

  • Для чего нужны кнопки и какие функции они выполняют
  • Какие бывают кнопки и в чем их различия
  • Как сделать кнопку в HTML
  • Как сделать красивую кнопку в HTML и CSS

Также в конце статьи вас ждет небольшой бонус, который пригодится каждому сайтостроителю.

Но давайте по порядку.

Для чего нужны кнопки на сайте?

Ответ напрашивается сам собой: “Для того, чтобы их нажимали!”. И, действительно, выделяющаяся симпатичная кнопка привлекает гораздо больше внимания чем тусклая и унылая ссылка. С другой стороны, если вся страница заполнена разномастными кнопками, которые, переливаясь и моргая, требуют внимания пользователя, он, скорее всего, не поняв, что от него требуется, не нажмет ни на одну и просто закроет вкладку.

Поэтому использовать кнопки надо “экономно”, в идеале не больше 1-2 в видимой области экрана. При этом пользователю должно быть максимально понятно, что произойдет, если он нажмет на кнопку.

Какие бывают кнопки?

В моем представлении кнопки бываю двух типов, для каждого из них я использую соответствующие HTML-теги:

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

Кнопки-действия нужны для совершения какого-либо действия на странице (отправка формы, открытие модального окна и т.д.). Для этого можно использовать теги или . Я предпочитаю второй вариант, т.к. он гораздо более гибкий в настройке.

В то же время атрибут href является невалидным для тега , поэтому его не стоит использовать в качестве кнопки-ссылки. Опять же, можно сделать кнопку ссылкой, придумав какие-нибудь “костыли” типа

Но зачем это нужно. Все гораздо проще и понятнее.

Если кнопка нужна для перехода на страницу — используем , во всех остальных случаях —

Как сделать кнопку в HTML?

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

Основными атрибутами таких кнопок являются:

type: button | submit | reset

Тип кнопки. Это необязательный параметр, и его можно пропустить. Если кнопка находится внутри формы и атрибут type отсутствует, браузер посчитает, что тип кнопки — submit и попытается отправить форму обработчику.

Несмотря на слухи, которые ходят в интернете, о том, что тег должен располагаться только внутри тегов , на самом деле это не так 🙂 Если вдруг по какой-то причине Вам нужно или хочется поместить свою кнопку вне формы, которую она должна отправлять/сбрасывать/еще-что-то-делать, просто используйте атрибут form со значением соответствующим атрибуту id этой формы.

Кроме того, у тега button могут быть следующие атрибуты:

  • autofocus — Автоматически устанавливает фокус браузера на кнопке при загрузке страницы
  • disabled — Кнопка заблокирована и нажатие на нее не выполняет никаких действий
  • formaction (только для типа submit) — адрес обработчика формы, на который отправляются данные из формы
  • formenctype (только для типа submit) — Тип отправляемых данных. Может быть application/x-www-form-urlencoded , multipart/form-data , text/plain
  • formmethod (только для типа submit) — HTTP-метод, при помощи которого пересылаются данные. Может быть get или post
  • formnovalidate (только для типа submit) — Отключает автоматическую валидацию введенных данных
  • formtarget (только для типа submit) — Указывает на то, как выводится результат обработки формы. Может быть _blank , _self , _parent , _top или значение атрибута name фрейма
  • name — Имя кнопки (можно использовать если, например, в форме есть несколько кнопок, которые ее отправляют, и обработчику нужно знать, какая из них нажата)
  • value — Значение кнопки (смысл примерно тот же, что и с name)

Совет: используйте только быстрый и надёжный хостинг для своих сайтов, например Beget.com

Как сделать красивую кнопку в HTML и CSS?

У каждого из нас свое представление о красоте: кто-то считает красивым закат на берегу моря, а кто-то — Ниссан Жук. О вкусах, как говорится, не спорят.

В моем представлении красивая кнопка — это кнопка, которая обладает следующими качествами:

Является интерактивной (т.е. реагирует на взаимодействие с ней пользователем). Отличительной чертой кнопок, является то, что их можно нажимать, следовательно у кнопки должно быть несколько состояний: дефолтное (состояние «покоя»), нажатое и «ховер» (при наведение курсора)

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

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

Кроме того, тренды в дизайне интерфейсов и технологии их создания постоянно меняются, и за ними нужно успевать.

Если вы хотите узнать как сделать кнопку объемной или с эффектом «стекляшечности», как сделать картинку кнопкой и т.д. — почитайте статьи по дизайну интерфейсов за 2005-2009 гг. 🙂

Еще одним пунктом я бы добавил, расположение кнопки в привычных для посетителей местах (например, кнопки входа/регистрации в правом верхнем углу, или кнопка отправки формы под формой). Но это уже больше относится к дизайну всей страницы.

Итак, давайте для начала сделаем две обычные кнопки, одна из которых должна открывать модальное окно (кнопка-действие — ) с формой для входа, а вторая — вести на страницу регистрации (кнопка-ссылка — ). При этом обе кнопки будут выполнены в одной стилистике.

Для вывода иконок в кнопках, да и, в общем-то, везде я использую замечательный шрифт FontAwesome, а для текста — бесплатный шрифт Roboto, с которым одинаково хорошо смотрятся как кириллические, так и латинские символы.

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'); @import url('https://fonts.googleapis.com/css?family=Roboto');
.button < /* Сбрасываем дефолтные стили */ border: none; outline: none; display: inline-block; text-align: center; text-decoration: none; cursor: pointer; font-size: 16px; /* Можно также использовать любые встроенные и кастомные шрифты, например, отсюда */ font-family: Roboto, Verdana, Tahoma, sans; /* Тут можно поэкспериментировать */ padding: 12px 16px; border-radius: 100px; color: #fff; >.button i < margin-right: 4px; >.button + .button < margin-left: 6px; >.button.blue < background: #2196F3; >.button.purple

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

.button:hover < box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); >.button:hover.blue < background: #39a1f4; >.button:hover.purple < background: #a66bbe; >.button:active < box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); >.button:active.blue < background: #0d8aee; >.button:active.purple

Вот и все! Две симпатичные кнопки готовы.

При наличии желания и времени можно их дополнить плавными анимированными переходами. Вот несколько примеров:

А теперь обещанный бонус для тех кто дочитал этот пост до конца.

Красивая анимированная кнопка наверх для сайта

#scroll-top < position: fixed; bottom: 48px; right: 48px; >#scroll-top button < position: relative; overflow: hidden; height: 48px; width: 48px; border: none; outline: none; cursor: pointer; color: rgba(0, 0, 0, 0.3); font-size: 16px; background: #21c984; transition: width 0.5s; border-radius: 100px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); >#scroll-top button span < display: inline-block; transition: opacity 0.3s ease 0s, transform 0.5s ease 0s; line-height: 48px; font-size: 20px; width: 100%; >#scroll-top button span::before < width: 100%; position: absolute; left: 0px; top: 200%; opacity: 0; content: attr(data-hover); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); color: #fff; font-size: 16px; text-transform: uppercase; >#scroll-top:hover button < width: 120px; background: #9b59b6; >#scroll-top:hover button span < -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); transform: translateY(-200%); >#scroll-top:hover button span:before < opacity: 1; >#scroll-top button:active
jQuery(document).ready(function($) < $("#scroll-top >button").on("click", function(e) < var body = $("html, body"); body.stop().animate(< scrollTop: 0 >, 500, "swing"); >); >);

В итоге должно получиться что-то похожее на это 😉

Надеюсь, эта статья была для вас полезна. Буду рад ответить на ваши вопросы в комментариях.

Скруглённые уголки

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius . Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.

В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.

Код Описание Вид
div

Радиус скругления для всех уголков сразу.
div

Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.
div

Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.
div

Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.

В примере 1 показано создание блока со скруглёнными уголками.

Пример 1. Уголки у блока

HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Радиус   
Меня — супплетивная форма винительного падежа от я.

Результат данного примера показан на рис. 1.

Блок со скруглёнными уголками

Рис. 1. Блок со скруглёнными уголками

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

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

HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Кнопка     

Результат данного примера показан на рис. 2.

Рис. 2. Круглая кнопка

В браузере Opera скругление к применяется некорректно, если не задана граница через свойство border .

Свойство border-radius можно сочетать и с другими свойствами, например, добавить к элементу тень. В примере 3 сделан набор кружков, из которых один подсвечивается с помощью box-shadow . Такой набор можно использовать для навигации по страницам или по фотографиям.

Пример 3. Свечение

HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Свечение   

Результат данного примера показан на рис. 3.

Свечение вокруг кружка

Рис. 3. Свечение вокруг кружка

С помощью border-radius можно сделать не только кружок, но и эллипс, а также эллиптическое скругление у блока. Для этого надо написать не одно значение, а два через слэш. Запись 20px/10px означает, что по горизонтали радиус скругления будет 20 пикселов, а по вертикали 10 пикселов. В примере 4 показано создание эллиптических уголков для добавления к фотографии надписи оформленной как в комиксах.

Пример 4. Эллипсы

HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Эллиптические уголки    

Результат данного примера показан на рис. 4.

Использование эллиптических уголков

Рис. 4. Использование эллиптических уголков

Вид уголков можно изменить и у изображений, добавляя к селектору img свойство border-radius , как показано в примере 5.

Пример 5. Изображения

HTML5 CSS3 IE 9+ Cr Op Sa Fx

    Изображения body < background: #4b5457; >img 

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

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

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

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

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

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

Кнопка

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

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