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

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

У меня на сайте есть несколько вариантов создания различных кнопок. А в этой статье я хотел бы представить вашему вниманию два замечательных онлайн сервиса для создания подобных вещей. Такой подход самый простой, удобный и понятный. Всего лишь нужно ввести параметры будущей кнопки и скачать её изображение или CSS-код.

1. Da Button Factory

Da Button Factory - бесплатный онлайн сервис. Введите данные в поля и изменения будут применены в режиме реального времени. По окончанию, используйте ссылку Скачать (Download), чтобы получить изображение кнопки, или нажмите кнопку Вставить (Embed), чтобы напрямую интегрировать кнопку в веб-сайт (получить её стили - CSS).

В первом случае Вы получаете простое изображение кнопки и добавляете ссылку:

<a href="#" target="_blank"><img src="img/button.png" width="203" height="46" alt="кнопка регистрации"></a>

Если разместить изображение кнопки в папке img, а HTML-код скопировать и вставить на страницу сайта, получится следующее:

Во втором же случае получим подобие интерактивной кнопки:

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

CSS такой кнопки:

.button{
display: inline-block;
padding: 8px 20px;
background: #c6a93d;
border: 1px solid #081f65;
border-radius: 999px;
box-shadow: 4px 4px 0 0 #444;
color: #fff;
font: normal 700 24px/1 "Open Sans", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}

HTML:

<a href="#" class="button" target="_blank">Регистрация</a> 

Примечание: синий и красный цвета текста кнопки, являющегося ссылкой, определяются стилями ссылок сайта. Если хотите поменять эти цвета, добавьте стили в HTML-код кнопки. Эти стили здесь будут иметь приоритет.

HTML:

<a href="#" class="button" style="color: Moccasin;" target="_blank">Регистрация</a> 

Получится что-то вроде этого:

Образцы возможных вариантов кнопок, получаемых с помощью сервиса
Da Button Factory:

Процесс создания кнопки

1. TEXT - в этом поле ввести текст вашей будущей кнопки;
2. FONT - в выпадающем меню выбрать шрифт, при желании, поставить галки в чекбоксе Bold (жирный) и Italic (наклонный), выбрать величину шрифта (Size) и его цвет (Color);
3. TEXT SHADOW - поставить галочку в этом чекбоксе, если желаете видеть текст с тенью. Выберите смещение тени (Distance to text) и её цвет (Color);
4. SIZE - здесь выставляем горизонтальные (Horizontal padding) и вертикальные отступы (Vertical padding) в адаптированном или фиксированном режиме. Конечно, предпочтительней адаптированный режим (adapted to text).

1. STYLE - в выпадающем меню выбираем стиль углов;
2. BACKGROUND - выбираем один из четырех вариантов цветового фона. Во 2-м, 3-м и 4-м вариантах выбираем цвета для верхней и нижней части. Кнопка SWAP меняет цвета местами;
3. BORDER - устанавливаем толщину и цвет обрамления кнопки;
4. SHADOW - определяем, при желании, глубину, цвет и направление тени.

Далее остается выбрать расширение для изображения (одно из четырех) и скачать или получить CSS кнопки. При переходе по ссылке SAVE, можно скопировать выпавшую ссылку, добавить её в закладки, чтобы ещё раз вернуться к редактированию вашей кнопки.

2. CSS3 Buttons Generator

CSS3 Buttons Generator позволяет пользователям совершенно бесплатно создавать кнопки с градиентными фонами, закругленными углами, тенями и т.д.

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

Спасибо за внимание. Посещайте мой сайт. Пока! L.M.