Среди многочисленных генераторов кнопок, есть один весьма привлекательный. В отличии от многих других это не CSS генератор, а генератор изображений. На выбор предлагается больше сотни вариантов кнопок, без которых трудно представить себе любой современных сайт. И для примера создадим «классическую» кнопку. На рисунке она отмечена стрелкой и её шаблон расположен на этой странице
Для создания кнопки необходима сделать всего три шага
1. Написание текста и его оформление
Пишем текст и устанавливаем его параметры, тип шрифта, цвет и размер. Параметры контура Outline и тени Shadow можно оставить без изменений
2. Оформление кнопки
Прежде всего выбираем форму кнопки это различные виды прямоугольников, круг и эллипс. Высоту и ширину в данном случае можно не менять — текст уместился в установленные генератором размеры. Fill Type — параметр осуществляющий функцию градиента — перехода от одного цвета к другому. Выбираем вертикальный и устанавливаем цвета верхний синий #0A48F и нижний кремовый #EBDFDF. Далее оформляем контур Outline Thickness Толщина контура -тип медиум, цвет красный #F01D1D. Параметры тени оставляем прежними.
3. Отрисовка кнопки
Здесь устанавливаем два параметра два Render Effect Эффект рендеринга (обрисовки, визуализации) наш вариант Metal Three и Mouse Over — изменение кнопки при наведении мыши (точнее курсора) — выбираем Emboss.
4. Скачивание
Переходим на вкладку Composite и нажимаем большую синюю кнопку и нам представляется сама кнопка и ее код для установки на страницу сайта. Но прежде чем скачивать, стоит поменять цвет шрифта на красный #AD2840.
Этот генератор, обладая большим набором шаблонов кнопке имеет один недостаток — он не поддерживает многие кириллические шрифты. Если если создавать кнопку как текстовый блок, по с помощью CSS можно реализовать любой шрифт. Об этом в записи о еще одном генераторе кнопок.