Главная Сервисы Генераторы кнопок
Генераторы кнопок

Генераторы кнопок

86
0

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

Сервис №1 — Css button generator

Онлайн генератор кнопок на сайт

Данный сервис очень функционален и бесплатный.

Справа находится превью кнопки, а слева четыре вкладки для её редактирования:

  • CSS Button Basics – инструменты для смены стиля кнопки.
  • Border & Sizing – изменение размеров кнопки и шрифта, рамка.
  • Box Shadow – тень кнопки.
  • Text Shadow – тень текста.

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

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

В графе «Button Text» для превью можно добавить надпись, которая будет на кнопке, а чтобы добавить тексту объёма, необходимо использовать стиль «Bold». Стиль «italic» немного сдвинет все буквы влево.

В пункте «Button Style» выбирается стиль кнопки, а чуть ниже видим значение «Color Styles» — в нем выбирается стиль текста.

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

Настраиваем размеры кнопки

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

В третьей вкладке, а именно «Box shadow», можно настроить тень кнопки:

Настраиваем тень для кнопки

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

В последней, четвертой вкладке можно настроить тень для текста:

Настраиваем тень для текста

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

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

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

Когда вы закончите настройку кнопки, нужно перейти на вкладку «Get the code», и там будет CSS код для вставки элемента на сайт.

Адрес — cssbuttongenerator.com

Сервис №2 — Css-tricks

Первый сервис сделан при поддержке сайта CSS-Tricks, на котором собрано множество обучающих материалов по таблицам CSS.

Кнопки онлайн редактор

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

  • Top gradient color – цвет верхней части градиента.
  • Bottom gradient color – цвет нижней части градиента.
  • Top border color – цвет верхней части кнопки.
  • Hover background color – цвет кнопки при наведении курсора.
  • Text color – цвет текста.
  • Hover text color – цвет текста при наведении.
  • Active background color – цвет фона при клике на кнопку.

Во вкладке, расположенной в самом низу, можно изменить шрифт текста – всего доступно три варианта.

Обратите внимание на три верхних ползунка – первый из них регулирует размер кнопки, второй размер текста, а третий делает углы либо острыми, либо закругленными.

Когда вы настроите кнопку так, как вам нужно, нажмите на неё и получите CSS-код, необходимый для вставки на сайт.

Адрес — css-tricks.com/examples/ButtonMaker

Сервис №3 — Css3 button generator

css генератор кнопки

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

Вкладки в панели редактирования:

  • Font/Text – шрифт/текст.
  • Box – размер кнопки.
  • Border – настройки обрамления.
  • Background – настройки фона.
  • Hover – настройки внешнего вида кнопки при взаимодействии пользователя с ней.

Во вкладке «Font/Text» можно редактировать значения, которые связаны с текстом – изменять шрифт, цвет, размер, а также корректировать тень от надписи. По желанию некоторые из параметров можно отключить, сняв галочку напротив.

Во вкладке «Box» находятся настройки размера кнопки — её тень, обрамление и эффект затемнения (Blur).

Во вкладке «Border» включается/отключается эффект дополнительной рамки у кнопки – редактируются его размеры, стиль и цвет.

Во вкладке «Background» можно настроить стиль фона элемента – градиент или сплошной. В первом случае указываются два параметра – начальный и конечный цвета градиента.

Во вкладке «Hover» те же настройки, что и в пункте «Background», только редактируется внешний вид кнопки в активированном состоянии. То есть, когда пользователь наведет на неё курсором или кликнет по ней, она изменит цвет.

За считанные секунды мы сделали вот такую вот кнопку:

css кнопка на сайт

Эффект объёма текста достигается за счет сдвига тени в сторону.

Адрес — css3buttongenerator.com

Сервис №4 — Css button

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

Онлайн генератор css

Сверху находятся две основные вкладки:

  • Design – графическое редактирование.
  • CSS – CSS код.

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

В первой вкладке есть 8 пунктов:

  • Border – редактирование рамки.
  • Gradients – настройки градиента.
  • Box Shadow – настройки тени кнопки.
  • Font – настройки шрифт.
  • Text Shadow – настройки тени от текста.
  • Dimensions – настройки размеров кнопки.
  • Background – настройки фона.
  • Transition/Transform – настройки перехода.

Над превью кнопки находится ещё три вкладки:

  • Normal.
  • Hover.
  • Active.

Перемещаясь по ним, можно редактировать настройки кнопки в зависимости от её состояния – статичное, при наведении курсора и активное.

Описывать каждую вкладку мы не будем, потому как параметры в них такие же, как и во всех предыдущих сервисах. Однако, есть и интересные моменты – например, в пункте «Transition/Transform» можно настроить что-то наподобие анимированного перехода. То есть, вы выставляете разные значения ко всем трем позиция (Normal/Hover/Active), и при нажатии на кнопку, к примеру, цвета в ней будут плавного перетекать из одного в другой. Выглядит неплохо, но на практике не дает никакого толку.

Адрес — cssbutton.me

Генераторы кнопок
Оцените сайт

Оставить комментарий к статье

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

Вверх