Главная » Языки программирования

Уменьшить размер кнопки css

Содержание
  1. Кнопки CSS — Краткое руководство
  2. Загрузка bttn.css
  3. Использование кнопки
  4. Определение размера
  5. Определение цвета
  6. Загрузка bttn.css
  7. Использование кнопки
  8. Определение размера
  9. Определение цвета
  10. Загрузка bttn.css
  11. Использование кнопки
  12. Определение размера
  13. Определение цвета
  14. Определение стиля
  15. Загрузка социальных кнопок
  16. Использование кнопки
  17. Определение размера
  18. Использование только значков
  19. Загрузка Beautons
  20. Использование кнопки
  21. Определение размера
  22. Определение размера шрифта
  23. Определение функциональных кнопок
  24. Комбинирование стилей
  25. Beautons
  26. Оформление кнопок
  27. Ширина и высота кнопки
  28. Параметры текста
  29. Рамка
  30. Скругление углов
  31. Фон
  32. Градиентный фон
  33. Добавление тени
  34. Итоги

Кнопки CSS — Краткое руководство

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

  • bttn.css— Библиотека bttn.css предоставляет огромную коллекцию простых стилей для кнопок. Эта библиотека абсолютно бесплатна как для личного, так и для коммерческого использования. Эти кнопки можно легко настроить.
  • Pushy Buttons — Библиотека Pushy Buttons — это небольшая библиотека CSS Pressable Buttons.
  • btns.css — Библиотека кнопок btns.css — это набор кнопок CSS, которые используют плавные переходы.
  • Social Buttons — Библиотека социальных кнопок — это набор кнопок CSS, созданных на чистом CSS и основанных на Bootstrap и Font Awesome.
  • Beautons— Библиотека кнопок Beautons — это простой набор инструментов CSS для создания кнопок. Он позволяет применять сочетание стилей и размеров для создания огромного набора последовательных, надежных и твердых кнопок.

Загрузка bttn.css

Чтобы загрузить библиотеку btns.css, перейдите по ссылке btns.css и вставьте следующую строку в раздел веб-страницы.

Использование кнопки

Создайте кнопку с помощью тега кнопки html и добавьте стили bttn-slant, bttn-royal с указателем размера bttn-lg.

Читайте также:  Php mysqli query with parameters

Определение размера

Вы можете увеличить или уменьшить размер кнопки, определив ее размер с помощью CSS и используя его вместе с именем класса, как показано ниже. В данном примере у нас есть изменения четырех размеров.

Определение цвета

Как и размер, вы можете определить цвет кнопки с помощью CSS. В следующем примере показано, как изменить цвет кнопки.

Загрузка bttn.css

Чтобы загрузить библиотеку pushy-buttons.min.css, загрузите css с github и вставьте следующую строку в раздел веб-страницы.

Использование кнопки

Создайте кнопку с помощью тега кнопки html и добавьте стили btn, btn-blue с указателем размера btn-lg.

Определение размера

Вы можете увеличить или уменьшить размер кнопки, определив ее размер с помощью CSS и используя его вместе с именем класса, как показано ниже. В данном примере у нас есть изменения четырех размеров.

Определение цвета

Как и размер, вы можете определить цвет кнопки с помощью CSS. В следующем примере показано, как изменить цвет кнопки.

Загрузка bttn.css

Чтобы загрузить библиотеку btns.css, перейдите по ссылке btns.css и вставьте следующую строку в раздел веб-страницы.

Использование кнопки

Создайте кнопку с помощью тега кнопки html и добавьте стили btn, btn-blue с указателем размера btn-lg.

Определение размера

Вы можете увеличить или уменьшить размер кнопки, определив ее размер с помощью CSS и используя его вместе с именем класса, как показано ниже. В данном примере у нас есть изменения четырех размеров.

Определение цвета

Как и размер, вы можете определить цвет кнопки с помощью CSS. В следующем примере показано, как изменить цвет кнопки.

Определение стиля

Так же, как размер, цвет, вы можете определить стиль кнопки с помощью CSS. В следующем примере показано, как изменить стиль кнопки.

Библиотека социальных кнопок — это набор кнопок CSS, созданных на чистом CSS и основанных на Bootstrap и Font Awesome.

Загрузка социальных кнопок

Чтобы загрузить библиотеку bootstrap-social.css, загрузите bootstrap-social.css с github и вставьте следующую строку в раздел веб-страницы.

Использование кнопки

Создайте кнопку с помощью тега привязки html и добавьте стили btn, btn-block с помощью спецификатора социальных сетей btn-social.

Определение размера

Вы можете увеличить или уменьшить размер кнопки, определив ее размер с помощью CSS и используя его вместе с именем класса, как показано ниже. В данном примере у нас есть изменения четырех размеров.

       Login with Twitter Login with Twitter Login with Twitter Login with Twitter

Использование только значков

Загрузка Beautons

Чтобы загрузить библиотеку Beautons, загрузите css с github и вставьте следующую строку в раздел веб-страницы.

Использование кнопки

Определение размера

Вы можете увеличить или уменьшить размер кнопки, определив ее размер с помощью CSS и используя его вместе с именем класса, как показано ниже. В данном примере у нас есть изменения четырех размеров.

Определение размера шрифта

Вы можете увеличить или уменьшить размер кнопки, определив ее размер с помощью CSS и используя его вместе с именем класса, как показано ниже. В данном примере у нас есть изменения четырех размеров.

Определение функциональных кнопок

Комбинирование стилей

     
 

 

 
A  in a paragraph.

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

Beautons

Источник

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

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

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

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

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

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

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

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

К тексту на кнопке применимы те же свойства, что и для обычного текста. В частности, допустимо менять шрифт, размер текста, его насыщенность, цвет и др. В примере 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(). Например, для вертикального градиента от красного к синему цвету пишем следующее:

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

Вместо названия цветов или шестнадцатеричных значений цвет удобно задавать в формате 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. У него четыре основных параметра: первые два отвечают за смещение тени, третий устанавливает её размытие, а четвёртый цвет тени. Так, для создания равномерной полупрозрачной тени вокруг кнопки используем следующую запись.

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

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

Итоги

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

Источник

Оцените статью
© 2024 Программирование