Эти кнопочки я сделала сама,очень легко  и быстро  на CoolText - простой онлайн генератор кнопок из готовых шаблонов подойдет тем, кому нужно быстро без сложных настроек и бесплатно сделать кнопку для сайта. В базе сервиса более 1200 различных шрифтов, есть которые поддерживают кириллицу. Можно будет использовать русские буквы в названии кнопки.К готовому стилю можно добавить различные эффекты для текста и самой кнопки. Доступно применение эффекта геля, стекла и 3d, наложение тени. Онлайн генератор кнопок CoolText позволяет создать кнопку , изменяющуюся при наведении на нее курсора мыши.

Создание кнопки для сайта в онлайн генераторе CoolText:

Перейдите на сайт сервиса CoolText. Выберите стиль кнопки (Choose a Button Design), нажав на понравившееся изображение.

На следующей странице происходит непосредственно создание кнопки на основе выбранного шаблона. Укажите название кнопки и желаемые параметры.

Text – задает параметры текста, написанного на кнопке

Text – название кнопки

Font – в этом блоке задаются параметры шрифта

• Поле-образец шрифта - предназначено для выбора шрифта. Выбирается также как опция Font в генераторе логотипов.


• Color – цвет


• Size – размер


• Bold, Italics – делает шрифт жирным или курсивом. Если эта опция нужна, поставьте галочку.

Outline – обводка (контур) текста

• Thickness – толщина


• Color – цвет

Shadow – тень текста

• Type – вид тени


• Color – цвет

Offset – смещение текста

• X - по горизонтали


• Y – по вертикали

Button – задает параметры самой кнопки

Shape – форма кнопки

Fill – заливка

• Gradient – тип градиента (вертикальный, горизонтальный, радиальный и др.)


• Color 1 - цвет начальной точки


• Color 2 - цвет конечной точки

Outline - обводка (контур) кнопки

• Thickness – толщина


• Color – цвет

Shadow – тень кнопки

• Type – вид тени


• Color – цвет

Other – другие опции

• Effect – эффекты


• Mouse Over – эффект при наведении курсора мыши

Size – размеры кнопки

• Width – ширина


• Height – высота


• Auto – автоматическое установление размера кнопки по тексту. Если эта опция нужна, поставьте галочку.

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

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

После того как определитесь с параметрами, нажмите на кнопку Render Button (создать кнопку) для отображения результата ваших действий. Откроется страница с изображением сделанной кнопки. Скачайте его, перейдя по ссылке Download Image.

Если вы использовали эффект при наведении курсора, откроются три картинки: 1 - внешний вид кнопки, 2 - вид кнопки при наведении на нее курсора, 3 - предпросмотр. Первое изображение при наведении на нее мышки заменяется вторым. Если полученный результат вам нравится, скачивайте первые две картинки (нажатием на ссылку Download Image).

В поле Mouse Over HTML Code располагается html-код сгенерированной кнопки. Чтобы редактировать это изображение, перейдите по ссылке- Edit this logo. Email Image - отправка изображения в электронном письме на любой адрес (для этого потребуется регистрация на сайте). Чтобы выбрать новый стиль, нажимайте на раздел Buttons в верхнем меню и начинайте все сначала.

С помощью этого онлайн генератора можно еще создать логотип для сайта. Также все просто, как и создание кнопки.

источник