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

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

  • автор:

Овальная кнопка с помощью CSS

Нашел на просторах сети интересную овальную кнопку, которая построена только на CSS3 без использования графических изображений.

Создание красивой овальной кнопки без использования графических картинок.

Код HTML для овальной кнопки:

Для того, чтобы не прописывать вручную все вендорные префиксы, можно использовать скрипт prefixfree.min.js, который обработает и добавит необходимые префиксы в файлах css на стороне клиента:

Используем такие стили для овальной кнопки на CSS:

.btn-oval < display: inline-block; width: 240px; height: 70px; box-sizing: border-box; text-align: center; color: #fff; text-decoration: none; background: linear-gradient(#89c13e, #599c02); background-color: #6fad1d; border-radius: 35px; border: 1px solid #579a00; font: bold 30px/70px Arial; box-shadow: inset 0 2px 2px #cce464, inset 1px 0 3px #b2dc2d, inset -1px 0 3px #b2dc2d, inset 0 -2px 2px #89d301, 0 0 3px rgba(0, 0, 0, 0.24); position: relative; text-shadow: 0 1px #45880d; outline: none; >.btn-oval:before < content: ""; position: absolute; top: -10px; left: -10px; width: 100%; height: 100%; padding: 10px; background: #d7d7d7; z-index: -1; border-radius: 50px; box-shadow: inset 0 1px 2px #bbb; >.btn-oval:hover < background: linear-gradient(#97d444, #65ad07); box-shadow: inset 0 1px 0 #e2f498, inset 0 2px 0 #ceec87, inset 0 3px 0 #c3e67c, inset 0 5px 0 #bae475, inset 1px 0 3px #b2dc2d, inset -1px 0 3px #b2dc2d, inset 0 -2px 2px #89d301, 0 0 3px rgba(0, 0, 0, 0.24); >.btn-oval:active

Рабочий пример овальной кнопки на CSS (кликабельно):

Источник уже не помню, но вроде бы Dimox.

В таблице все, кроме буквы «Ё» — у нее кодировка в порядок не вписывается —…

Для ввода в HTML документ символов, которые отсутствуют на клавиатуре или которые имеют в синтаксисе…

Пример, как сделать скрипт для суммы всех полей. При вводе в поле данных идет моментальный…

Как скачать Google шрифты, чтобы использовать их локально? Иногда нужно, чтобы сборка проекта была изолирована…

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

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

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

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

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

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

Кнопка

Результат данного примера показан на рис. 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 

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

Через 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.

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

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