Бесплатные кнопки для сайта

С правой стороны открывшегося окна располагаются шаблоны кнопок. Их можно использовать без изменения стилей, а можно, как в рассматриваемом примере, на их основе создать новый стиль, соответствующий дизайну Вашего сайта. Остановимся на последнем шаблоне кнопки и нажмём на «Дополнительные настройки»:

Здесь Вы можете:

- выбрать цвет текста;
- задать цвет кнопки (при этом кнопка может быть не однотонной, а состоять из двух цветов, которые плавно перетекают один в другой, если Вы выберете вариант «градиент»);
- добавить тень от текста и от самой кнопки;
- задать отступы от краёв кнопки до текста внутри неё;
- определить, будет ли кнопка квадратной или со скругленными углами, и если углы будут скруглены, то как именно;
- сделать рамочку для кнопки;
- размыть цвета внутри кнопки для получения более плавных переходов.

Разбирая практический пример, сделаем кнопку в цветах Мегагрупп.ру - зелёную с белым текстом. Для этого в верхнем поле вместо слов «Текст кнопки» прописываем свой вариант надписи. Если изменения не отразятся сразу, нажмите на кнопку «Применить». В разделе «Цвет текста» кликаем на цветной квадратик и передвигаем маркер в верхний левый угол, соответствующий белому цвету:

Помимо определения цвета «на глаз» (с помощью перемещения маркера), можно задать цвет, прописав его в RGB, HSB или HTML кодах (если они Вам известны). К слову, на нашем сайте Вы можете найти таблицу цветов, в которой перечислены, конечно, не все возможные, но очень многие оттенки.
Под названием кнопки можно указать желаемый шрифт и его размер:

В разделе «Цвет кнопки» в выпадающем списке выберем вариант «два цвета»

В первом цветовом квадрате, которому соответствует верхняя половина кнопки, будет более светлый оттенок зелёного, а во втором – более тёмный:

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

Для выразительности всей кнопки, сделаем тень и ей. Пусть она будет немного побольше тени от текста - так кнопка выглядит более объёмно:

Отступы трогать не будем – стандартные вполне гармонично смотрятся в нашем случае. Но помните, что при необходимости с их помощью Вы можете увеличить или уменьшить кнопку, для лучшего сочетания с дизайном всего сайта:

Обведём кнопку рамкой, подобрав подходящий цвет экспериментальным путём. Для данного случая подойдёт тёмно-зелёная рамка толщиной в 1 пиксель:

Подкорректируем скругление углов, уменьшив радиус с 18 до 10 пикселей:

И финальный штрих – зададим внутреннее размытие, которое сгладит переходы между цветами внутри самой кнопки:

Обратите внимание: не обязательно пользоваться всеми настройками. Ваша кнопка может смотреться вполне симпатично и при минимальных изменениях шаблона. Мы просто показали весь функционал в действии.
После того, как стили кнопки заданы, сохраняем её, нажав на кнопку «Сохранить»:

Теперь в нашей коллекции кнопок появился первый экземпляр:

При нажатии на него система предложит вписать адрес страницы (линк), куда будет вести кнопка. Его можно вписать сразу, если он известен, либо Вы просто пропускаете этот шаг, нажав на «Вставить». Во втором случае Вы всегда сможете назначить ссылку на кнопку позже. Процедура аналогична прописыванию ссылки на картинку. Если Вы не знаете, как это делается, можете обратиться к инструкции. Если Вы указываете адрес сразу, то здесь же можно определить как именно будет происходить переход – с открытием новой страницы в текущей вкладке, или в новом окне:

Итак, кнопка размещена:

Но хотелось бы сделать её более живой - так, чтобы при наведении курсора она «реагировала».
Для этого нам понадобится альтернативное изображение кнопки. Снова вызываем окно создания кнопок:  .

Нам нужна полная копия текущего изображения с незначительным изменением цветов. Чтобы не мучиться с созданием нового варианта с нуля, копируем имеющийся экземпляр, нажав на «Копировать» под уже готовой кнопкой:

В разделе «Дополнительные настройки» указываем чуть более светлые оттенки уже выбранных цветов и нажимаем «Сохранить»:

Вставляем кнопку на страницу, без указания ссылки. Выделяем новое изображение и переходим в раздел «Добавить/Изменить изображение»:

Здесь копируем адрес, выделив его курсором и нажав сочетание клавиш Ctrl+C, и закрываем окно редактирования изображения:

После этого вторую кнопку со страницы можно будет удалить, нажав на Delete на клавиатуре. Выделяем первоначальную кнопку и также переходим в раздел «Добавить/Изменить изображение»:

В появившемся окне переходим на вкладку «Дополнительно» и ставим галочку в пункте «Альтернативное изображение». В поле «При наведении» вставляем скопированный ранее адрес второго варианта кнопки (сочетание клавиш Ctrl+V), а в поле «В покое» размещаем адрес текущего изображения, который можно посмотреть и скопировать на вкладке «Общее». Сохраняем изменения кнопкой «Обновить»:

Если система предложит Вам перед сохранением прописать alt и title изображения, можно сделать это на вкладке «Общее»:

Выполняем это:

Попробовали? Получилось?! :) Поздравляем – кнопка полностью готова! Теперь Вы можете похвастаться тем, что вложили душу буквально в каждую кнопочку на Вашем сайте.

Сегодня наш совет дня посвящён популярному сервису Оникон. Совсем недавно среди тех, кто в повседневной бизнес-деятельности уже пользуется системой онлайн-консультирования, проводился опрос на тему: «Помогите сделать сервис лучше! Какая дополнительная опция в Ониконе Вам более всего необходима?»

По итогам Вашего голосования с результатом 35% победил вариант «SMS-уведомление о только что оставленном на сайте оффлайн-сообщении».

Логика предпринимателей понятна: чем быстрее свяжешься с клиентом, который хочет сделать заказ – тем больше шансов, что сделка состоится (пока покупатель «горит» желанием приобрести товар или услугу).

Вы – выбрали, мы – сделали! Система SMS-уведомлений внедрена в Оникон!

Как это работает? Задать номер телефона для SMS-уведомлений Вы можете в списке сайтов (кнопка «Настройки»). Даже когда Вы отошли от компьютера (оператор в оффлайне), Оникон находится на связи с клиентом. При соответствующей настройке он сразу отправит Вам сообщение потенциального заказчика.
Пример SMS-ки, которая будет приходить на телефон, показан на скриншоте.

Используйте новые возможности сервиса для более качественной работы с потенциальными покупателями!