Разное

Красивая кнопка: Красивые кнопки для сайта HTML + CSS — 24 готовых варианта

09.06.2023

Кнопка : Button : Стиль Выпадающий список из кнопки

    • Главная
    • UIkit 2

Создавайте красивые кнопки, которые могут быть разных стилей и размеров. Создать из кнопки выпадающий список, добавить в проект кнопки различной ширины.

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

Создание кнопок

Чтобы использовать в своём проекте компонент Кнопка, необходимо добавить класс .uk-button в элемент <a> или <button> и дополнительно добавить подходящий модификатор, например .uk-button-default.

Чтобы применить кнопке отключенное состояние, добавьте к элементу <button>

атрибут disabled.

<a href=""></a>
<button type="button"></button>
<button type="menu" disabled></button>

Заметка Если вы отображаете на больших экранах несколько кнопок в одном ряду, а на меньших областях просмотра может быть уже несколько строк, то можно автоматически добавить к ним margin (внешний отступ). Для автоматического добавления отступов добавьте атрибут uk-margin из компонента Внешний отступ к их родительскому элементу.

  • Результат
  • Разметка

  • Ссылка 

  • <p uk-margin>
    <a href="#">Ссылка</a>
    <button type="button">Кнопка</button>
    <button disabled>Отключено</button>
</p>

Модификатор «Стиль»

В UIkit 3 доступно несколько модификаторов для стиля кнопок.

Просто добавьте один из следующих классов, чтобы применить другой вид.

Класс Описание
.uk-button-default Стиль кнопки по умолчанию.
.uk-button-primary Указывает на основной цвет и действие. Кнока с заметным стилем.
.uk-button-secondary Указывает на важное действие. Кнопка с тёмным цветом.
.uk-button-danger Указывает на опасное или отрицательное действие.
.uk-button-text Применяется альтернативный, типографский стиль.
.uk-button-link Применяет простой стиль ссылки. 
<button></button>
  • Результат
  • Разметка
  • <p uk-margin>
    <button>Default</button>
    <button>Primary</button>
    <button>Secondary</button>
    <button>Danger</button>
    <button>Текст</button>
    <button>Ссылка</button>
</p>

Модификатор «Размер»

С модификатором Размер можно сделать кнопку и маленькую и большую. Добавьте к кнопке класс . uk-button-small или .uk-button-large, чтобы сделать размер кнопки меньше или больше. 

<button></button>

<button></button>
  • Результат
  • Разметка
  •  
    <p uk-margin>
    <button>Маленькая кнопка</button>
    <button>Маленькая кнопка</button>
    <button>Маленькая кнопка</button>
</p>
<p uk-margin>
    <button>Большая кнопка</button>
    <button>Большая кнопка</button>
    <button>Большая кнопка</button>
</p>

Модификатор «Ширина»

Добавьте класс .

uk-width-1-1 из компонента Ширина элементов и кнопка займет всю доступную ширину. Всё просто!

Пример

  • Результат
  • Разметка

Группа кнопок

Создание группы кнопок

Чтобы создать группу кнопок, добавьте к элементу <div> вокруг кнопок класс .uk-button-group

. Готово! Всё работает! Никакой дополнительной разметки не требуется. 

<div>
    <button></button>
    <button></button>
    <button></button>
</div>
  • Результат
  • Разметка
  • <div>
    <div>
        <button>Кнопка</button>
        <button>Кнопка</button>
        <button>Кнопка Secondary</button>
    </div>
</div>
<div>
    <div>
        <button>Кнопка</button>
        <button>Кнопка</button>
        <button>Кнопка Primary</button>
    </div>
</div>
<div>
    <div>
        <button>Кнопка</button>
        <button>Кнопка</button>
        <button>Кнопка Danger</button>
    </div>
</div>
  • Результат
  • Разметка
  • Кнопка сброса в форме 
  • <form action="">
	<legend>Кнопка сброса в форме</legend>

	<div>
		<input name="Имя" type="text" placeholder="Имя" required>
	</div>
	<div>
		<input name="E-mail" type="email" placeholder="E-mail" required>
	</div>
	<div>
		<button type="submit">Отправить</button>
		<button type="reset" uk-tooltip="title: Очистить; pos: bottom"><span uk-icon="trash"></span></button>
	</div>
</form>

Выпадающее меню

Выпадающий список из кнопки

Обычная кнопка может быть использована для вызова выпадающего меню навигации из компонента Выпадающий список : Dropdown. 

<!-- Кнопка переключения выпадающего списка Dropdown -->
<button type="button"></button>
<div uk-dropdown></div>
  • Результат
  • Разметка
    • Активный пункт
    • Пункт
    • Пункт
    • Ещё пункт
    • Отдельный пункт
  • <div>
    <button type="button">Dropdown</button>
    <div uk-dropdown>
        <ul>
            <li><a href="#">Активный пункт</a></li>
            <li><a href="#">Пункт</a></li>
            <li>Заголовок</li>
            <li><a href="#">Пункт</a></li>
            <li><a href="#">Ещё пункт</a></li>
            <li></li>
            <li><a href="#">Отдельный пункт</a></li>
        </ul>
    </div>
</div>

Группа кнопок и Dropdown

Группа кнопок и выпадающие списки Dropdown

Используйте группы кнопок, чтобы расположить кнопки в стандартном виде: основная кнопка слева и выпадающий переключатель справа. Оберните переключающую кнопку и раскрывающийся список внутри элемента <div> и добавьте класс .uk-inline из компонента вспомогательных классов Utility. 

<!-- Группа кнопок с выпадающим меню Dropdown -->
<div>
    <button></button>
    
    <div>
        <!-- Кнопка переключения выпадающего -->
        <button type="button"></button>
        <div uk-dropdown="mode: click; target: !.uk-button-group;"></div>
    </div>
    
</div>
  • Результат
  • Разметка
    • Активный пункт
    • Пункт
    • Пункт
    • И ещё пункт
    • Отдельный пункт
  • <div>
    <button>Dropdown</button>
    <div>
        <button type="button" aria-label="Переключить выпадающий список">
            <span uk-icon="icon: triangle-down"></span>
        </button>
        <div uk-dropdown="mode: click; target: !. uk-button-group;">
            <ul>
                <li><a href="#">Активный пункт</a></li>
                <li><a href="#">Пункт</a></li>
                <li>Заголовок</li>
                <li><a href="#">Пункт</a></li>
                <li><a href="#">И ещё пункт</a></li>
                <li></li>
                <li><a href="#">Отдельный пункт</a></li>
            </ul>
        </div>
    </div>
</div>

UIkit 3 Компоненты UIkit 3

Настройка дизайна кнопок | Центр Поддержки

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

Нажмите значок Дизайн на кнопке, чтобы настроить ее.

                                    

Настройка разных состояний кнопки

Вы можете отдельно настроить состояния каждой кнопки на сайте. Это позволяет создавать потрясающие эффекты, которые видят посетители при навигации по сайту.

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

Как это сделать?

  1. Нажмите значок Дизайн на кнопке.
  2. Нажмите кнопку Настроить дизайн.
  3. Нажмите на нужную вкладку в верхней части панели дизайна и выберите состояние кнопки, которое вы хотите настроить:
    • В покое: как кнопка отображается на вашем сайте до того, как посетители начнут с ней взаимодействовать.
    • При наведении: как выглядит кнопка при наведении на нее курсора.
    • При нажатии: как кнопка отображается после нажатия.
    • Ошибка: возникла проблема с функцией кнопки (например, при загрузке файла и т. д.).

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

Дизайн кнопки

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

Выберите, что вы хотите сделать:

Настройка кнопки с текстом и значком

  1. Нажмите значок Дизайн на кнопке.
  2. Нажмите на кнопку Настроить дизайн и выберите вкладку.
    • Цвет и прозрачность : настройте заливку фона кнопки. Подробнее
    • Текст : настройте дизайн текста кнопки. Подробнее
    • Границы : измените ширину и дизайн границ. Подробнее
    • Уголки : позволяет регулировать радиус углов кнопки. Подробнее
    • Тени : позволяет добавлять и настраивать эффект тени на кнопке. Подробнее
    • Макет : позволяет выбирать, что должно отображаться на кнопке, задавать тип выравнивания и настраивать некоторые другие параметры. Подробнее
    • Значок : позволяет менять внешний вид значка на кнопке. Подробнее

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

Настройка кнопки-значка

  1. Нажмите на значок Дизайн на кнопке.
  2. Нажмите Настроить дизайн и выберите вкладку:
    • Цвет и прозрачность : настройте заливку фона кнопки. Подробнее
    • Текст : позволяет настроить дизайн текста на кнопке. Подробнее
    • Границы : позволяет менять ширину и дизайн границ. Подробнее
    • Уголки : позволяет регулировать радиус углов кнопки. Подробнее
    • Тени : позволяет добавлять и настраивать эффект тени на кнопке. Подробнее
    • Макет : позволяет выбирать, что должно отображаться на кнопке, задавать тип выравнивания и настраивать некоторые другие параметры. Подробнее
    • Значок : позволяет менять внешний вид значка на кнопке. Подробнее

Настройка кнопки с изображением

  1. Нажмите кнопку Заменить иконку.
  2. Выберите состояние кнопки из верхнего меню. Подробнее
  3. Установите эффект перехода.
  4. Выберите значок, который вы хотите использовать:
    • Нажмите Медиа от Wix и выберите один из доступных значков.
    • Нажмите Загрузить файлы, чтобы загрузить и использовать свои собственные файлы векторной графики. Подробнее, как загрузить векторную графику

Словарь терминов по дизайну кнопки

Параметры настройки дизайна

Опция

Пояснение

Как использовать

Заливка

Добавьте различные заливки, такие как цвета, изображения, узоры и градиенты, чтобы создать потрясающие и красочные эффекты для кнопки. 

  • Щелкните поле цвета для каждого слоя и выберите тип заливки, затем перетащите ползунок, чтобы изменить прозрачность слоя заливки.
  • Измените порядок слоев заливки, перетаскивая их вверх и вниз по списку. 

Границы

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

  • Нажмите на поле Ширина и введите ширину в пикселях.
  • Нажмите на раскрывающийся список Стиль и выберите стиль границы.
  • Нажмите на поле Заливка, выберите цвет границы и используйте ползунок для регулировки прозрачности. 

Уголки

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

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

Тени

Добавьте тень к кнопке, а затем настройте ее цвет и размер.

  • Нажмите на поле цвета для каждого слоя и выберите тип заливки, затем перетащите ползунок, чтобы изменить прозрачность слоя заливки.Измените порядок слоев заливки, перетаскивая их вверх и вниз по списку. 
  • Измените порядок теней, перетаскивая их вверх и вниз по списку.  

При использовании кнопки загрузки:

  • Нажмите на переключатель, чтобы включить тени.
  • Используйте ползунки для редактирования угла, расстояния, размера и размытия. Затем используйте ползунок и поле палитры, чтобы отредактировать прозрачность и цвет.

Макет

Меняет макет кнопки.

  • Нажмите на раскрывающееся меню Выберите, что показать и выберите, что будет отображаться на кнопке: текст, значок или и то и другое.
  • Выберите выравнивание, положение и расстояние между текстом и значком (при необходимости).
  • Задайте отступы вокруг текста и/или значка.

Параметры форматирования текста

Опция

Пояснение

Как использовать

Показать текст

Включает или выключает отображение текста на кнопке.

Нажмите переключатель, чтобы показать или скрыть текст кнопки.

Стиль

Выберите стиль текста кнопки.

Выберите стиль текста из раскрывающегося меню.

Шрифты

Подберите шрифт текста кнопки.

Нажмите раскрывающееся меню и выберите шрифт

Размер шрифта

Меняет размер текста кнопки.

Перетащите ползунок, чтобы увеличить или уменьшить размер шрифта, или введите значение.

Форматирование текста

Выберите форматирование текста. 

  • Отформатируйте текст с помощью доступных вариантов: полужирный, курсив, подчеркивание, зачеркивание, цвета, заглавные, направление и выравнивание текста.

Межбуквенный интервал

Измените интервал между текстовыми символами.

Перетащите ползунок, чтобы увеличить или уменьшить расстояние между символами, или введите значение.

Тени

Добавляет тень к тексту. Вы можете добавить к тексту несколько теней.

Нажмите Добавить тень, чтобы добавить новую. Щелкните значок Настроить тень, чтобы настроить ее параметры.

Параметры значка

Опция

Пояснение

Как использовать

Показать значок

Включает или выключает отображение значка на кнопке.

Нажмите переключатель, чтобы показать или скрыть значок на кнопке.

Размер

Меняет размер значка.

Перетащите ползунок, чтобы увеличить или уменьшить размер значка, или введите значение.

Цвет

Меняет цвет значка.

Нажмите на поле цвета и выберите нужный оттенок.

Поворот

Задайте угол поворота значка.

Перемещайте ручку поворота и меняйте положение значка. Также вы можете ввести числовое значение в градусах в текстовое поле.

красивых дизайнов кнопок, тем, шаблонов и загружаемых графических элементов на Dribbble

  1. Просмотр ежедневного пользовательского интерфейса 085 «Разбиение на страницы»

    Ежедневный UI 085 «Разбивка на страницы»

  2. View Glowink — Интернет-магазин, мобильное приложение

    Glowink — Интернет-магазин, мобильное приложение

  3. Просмотр UX | Совместное использование карточек новостей

    UX | Обмен карточками новостей

  4. Просмотр пользовательского интерфейса панели инструментов

    Пользовательский интерфейс приборной панели

  5. Просмотреть веб-сайт Stailis — Fashion Store

    Stailis — Сайт модного магазина

  6. Просмотр кнопки свечения при наведении

    Кнопка свечения при наведении

  7. Просмотр 3D-оранжевого переключателя

    Оранжевый 3D-переключатель

  8. Посмотреть розы

  9. View Attio — элементы формы

    Attio — элементы формы

  10. Подсветка кнопки просмотра

    Подсветка кнопки

  11. Посмотреть ⭐️ Кнопка

    ⭐️ Кнопка

  12. Просмотр 3D-тумблера — C4D Download

    Тумблер 3D — загрузка C4D

  13. Просмотр 3D-режим полета Переключатель

    Переключатель 3D-режим полета

  14. View Mogo: Рекламное агентство

    Мого: Рекламное агентство

  15. Совет по дизайну: идеальные цвета для состояний кнопок

    Совет дизайнера. Идеальные цвета для состояний кнопок

  16. Посмотреть волнистую кнопку загрузки

    Волнистая кнопка загрузки

  17. Просмотр 3D-переключателя

    Радиокнопка 3D

  18. Посмотреть Clamby — целевая страница модного магазина

    Clamby — Целевая страница магазина модной одежды

  19. Посмотреть серию «Прекрасная история»

    Серия «Прекрасная история»

  20. Посмотреть автоматический размер уже здесь!

    Автоматический размер уже здесь!

  21. Посмотреть приложение для редактирования фотографий — полная страница

    Исследование приложения для редактирования фотографий — полная страница

  22. Посмотреть дизайн интерфейса частного банковского обслуживания от Milkinside

    Дизайн интерфейса частного банковского обслуживания от Milkinside

  23. Просмотр осенней иллюстрации

    Осенняя иллюстрация

  24. Просмотр Rosseta — Целевая страница макияжа

    Россета — Целевая страница макияжа

Зарегистрируйтесь, чтобы продолжить или войдите

Идет загрузка…

Beautiful Buttons — Etsy Turkey

Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных.

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

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