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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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