наверх

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

В этой статье речь пойдет о сервисе позволяющем с помощью не хитрых манипуляций создавать симпатичные кнопки на чистом CSS. Находиться он по адресу http://www.cssbutton.me/. Предлагаю познакомиться с инструментами этого сервиса поближе.

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

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

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

На вкладке Disign можно изменять дизайн нашей кнопки. Вкладка CSS показывает получающийся у нас код стилей.

Здесь есть три вкладки обозначающие состояние кнопки:

  • Normal — исходный вид;
  • Hover — вид при наведении;
  • Active — вид при нажатии.

Рассмотрим инструменты этого сервиса более подробно.

1. Border. Позволяет границу для кнопки.

  • Width — толщина границы;
  • Color — цвет границы;
  • Radius — скругление углов;
  • Style — значение позволющее управлять внешним видом границы.

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

2. Gradients. Позволяет задать градиент для кнопки. Нажимая кнопочку Add Gradient можно задать параметры для градиента.

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

3. Box Shadow. С помощью этого инструмента можно добавить тень для кнопки.

  • Horizontal — по горизонтали.
  • Vertical — по вертикали.
  • Blur — размытие тени.
  • Spread — размер тени.
  • Inset — переключатель с помощью которого можно сделать не только внешнюю тень, но и внутреннюю.
  • Color — цвет тени.

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

4. Font. Инструмент для манипуляции со шрифтом. Здесь представлены инструменты для управления цветом, размером, жирностью и положением шрифта.

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

5. Text Shadow. Тень для текста, аналогично Box Shadow.

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

6. Dimensions. Позволяет манипулировать с размером, отступами и свойством display.

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

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

7. Background. Эта вкладка для тех кто желает сделать свою кнопку в виде картинки.

8. Transition/Transform. Эта вкладка отвечает за переход от одного состояния кнопки к другому.

  • Duration — время перехода кнопки из одного состояния в другое.

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

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

CSS