Создать онлайн кнопку для сайта: создать кнопку для сайта онлайн

Анимированная кнопка для сайта — создаём красивые кнопки

Здравствуйте, уважаемые друзья. Сегодня я расскажу про два способа, которые помогут вам создать анимированную кнопку для ваших сайтов. Вы наверняка, видели много таких кнопок и нажимали на них. Так вот, на своём блоге я периодически рекомендую партнёрские курсы и тренинги, только те, что испробовал сам. И разумеется я интересуюсь статистикой, а статистика говорит, что на привлекательные кнопки люди нажимают на 48% чаще, чем на обычные ссылки.

По началу, когда я поставил цели Яндекс.Метрики на кнопки, я скорей хотел видеть сколько было переходов (именно по кнопке), но со временем я обратил внимание, что ссылки в статье по кликабельности в разы отличаются от анимированных кнопок. В общем, на такие кнопки кликают гораздо чаще.

И поэтому я советую использовать такие кнопки на Ваших сайтах и блогах. К тому же делаются они вовсе не трудно.

Итак, давайте приступать. И первый способ, который позволяет создать анимированную кнопку потребует от Вас создания графических заготовок и создания CSS стилей для этих кнопок. Второй же способ будет основываться только на CSS стилях.

Как создать анимированную кнопку с помощью графических заготовок

Если у вас есть навыки работы с графическими редакторами, — это только приветствуется. Если нет, берите готовые шаблоны, которые я подготовил для вас.

И вот видеоурок по первому способу:

Итак, открываем изображение кнопки в бесплатном онлайн-редакторе Pixlr Edition. Хотя, вы можете работать в любом удобно для Вас редакторе.

Открываем изображение

Для этого достаточно выбрать нужный файл и нажать кнопку «Открыть». Если вы используете свои изображения, помните они должны быть в формате PNG (то есть поддерживать прозрачность).

Выбор нужного файла

Теперь нужно увеличить размер холста. А заодно и узнаем исходный размер изображения. Это нам понадобится в дальнейшем.

Изменение размера холста

Исходный размер 300х90 надо увеличить по вертикали, и получится 300х200.

Если, что-то будет лишнее, после уберём.

Увеличив холст по вертикали, приступаем к дублированию слоя с кнопкой. Для этого достаточно просто перетащить имеющийся слой на иконку «Новый слой».

Дублирование слоя

Далее нужно сместить одно изображение ниже. Для этого используйте клавиши управления курсором. Изображения должны быть строго одно под другим. Иначе в дальнейшем получится немного не тот эффект на который Вы рассчитываете.

Смещение слоя вниз

Эффектов, которые Вы можете сделать огромное множество, это и изменение градиента, цвета, формы, прозрачности и так далее. Всё зависит от вашей фантазии.

В качестве примера, мы просто добавим призыв к действию на кнопке.

Надпись на кнопке

Слой с текстом также нужно дублировать и сместить ниже, на второе изображение кнопки. Делается это так же как описано выше. Должно получиться примерно так:

Две одинаковые кнопки

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

Поэтому верхнее изображение нужно изменить.

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

Эффект прозрачности

После того, как две кнопки готовы, нужно убрать всё лишнее. Для этого используйте инструмент «Обрезка».

Обрезка лишнего

Все, изображение готово, сохраняем в формате PNG.

Сохранение

Следующим этапом, загружаем изображение на сайт. Думаю, подробно останавливаться не будем, все и так знают, как это делать. Загрузив изображение, скопируйте ссылку на него в отдельный файл, она пригодится в дальнейшем.

Копируем ссылку на изображение

Вот теперь в статье, где вы захотите вставить кнопку, надо добавить вот такой код:

<div><a href="ВАША ССЫЛКА" target="_blank" rel="nofollow"></a></div>

Обратите внимание на класс ссылки в данном коде class="button_red". Для разных кнопок, данный класс нужно будет менять и в статье и в таблице стилей. Но это делается только один раз, в дальнейшем при вставке кнопки, достаточно будет вставлять вышеуказанный  код.

Далее открываем раздел «Внешний вид» > «Редактор» > «Таблица стилей»,

Добавление кода CSS в таблицу стилей

где в самом конце добавляем следующие стили.

/*Кнопка информация о курсе*/
.button_red {
display: block;
position: relative;
width: 271px;/*Ширина кнопки*/
height: 90px;/*50% высоты изображения*/
padding: 0px;
margin: 10px auto;
line-height: 94px;/*смещение по вертикали*/
border: 0px;
background: url(http://test.1zaicev.ru/wp-content/uploads/2014/06/buttons.png) 0 0 no-repeat;}/*путь к вашей кнопке*/

.button_red:hover { background-position: 0 -92px;}/*смещение фона*/ 
.t_c { text-align: center !important}

Комментариями отмечены те параметры, которые вам придётся менять в зависимости от размеров кнопки. Тут главное понять, что если изображение по высоте 180рх, вы указываете высоту (height) 90px. И с этим значением работаете, плюс минус несколько пикселей в параметрах line-height и background-position для улучшения эффекта.

Итак, первый способ готов, скачивайте архив с заготовками.

Как сделать анимированную кнопку с помощью CSS

Данный способ позволяет создавать красивые анимированные кнопки для сайтов, только на основе стилей CSS. Делать это можно и самому, но легче использовать онлайн генераторы для создания кнопок на CSS. Я пользуюсь вот этим сервисом CSSButton. Классный, многофункциональный сервис, но англоязычный и для новичка сложноват. Поэтому, для подготовки статьи я поискал в Интернете другие генераторы кнопок. В результате чего, я отобрал несколько сервисов, которые вы можете опробовать:

CSS3 Button Generator

Sciweavers

CSS Button Generator

CSS3 Linear Gradient Buttons Generator

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

Принцип создания анимированных кнопок на CSS заключается в следующем, есть три положения. 1 — Исходное, 2 — при наведении курсора и 3 — при нажатии кнопки мышки. В каких-то сервисах есть все три положения, а в каких-то только два. Но главное, чтобы вас устраивал конечный результат.

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

В качестве примера рассмотрим сервис CSS3 ButtonGenerator, в нём как раз всего два положения. Но эффекты смотрятся очень хорошо. Кого смущает отсутствие русского языка, используйте последний генератор, приведённый в списке.

Итак, начинаем.

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

Предварительный вид кнопки

Первый раздел Text&Font, отвечает за текст, размер шрифта, цвет шрифта, тень шрифта. Именно здесь вы пишете надпись на кнопке, задаёте неё размер, цвет, и тень.

Параметры шрифта

Следующий раздел Background, относится к фону. Здесь можно указать цвет кнопки, градиент кнопки, размер кнопки и смешение фона.

Параметры фона

Раздел Border, отвечает за настройки тени и бордюров кнопки. Вы без труда сможете настроить толщину бордюра, закругление углов, и тень кнопки.

Параметры бордюров

Следующий раздел Transform, отвечает за трансформацию кнопки, — это повороты, смещения, искажение.

Параметры трансформации

Следующий раздел Transition, отвечает за плавность анимации. Данные настройки Вы устанавливаете в соответствие с Вашей кнопкой. Действия могут быть применены как ко всей кнопке, так и к отдельным слоям.

Параметры анимации

Попробовав, несколько раз, поэкспериментировать с настройками и вы поймете, что к чему.

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

Параметры при наведении курсора мышки

Теперь все изменения в настройках вы делаете для кнопки, которые будут отображаться при наведении курсора мыши. И эти настройки зависят индивидуально от каждой кнопки. В качестве примера я изменил настройки поворота, градиента и цвета тени.

Вид при наведении

Когда готова кнопка, можно переходить к установке кнопки в статью. Для этого в нужном мести статьи устанавливаем код:

<a href="#">Текст ссылки</a>

Примечание: текст ссылки и будет надписью на кнопке. То есть надпись указанная в генераторе, — это лишь для предварительного просмотра.

После вставки ссылки в статью, в таблицу стилей вставляете полученный в генераторе стиль. В результате у Вас получится, ваша индивидуальная кнопка.

Вот наш пример:

Результат

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

На этом сегодня всё, желаю Вам удачи. И всегда рад видеть на страницах своего блога.

С уважением, Максим Зайцев.

P.S. А вот пример анимированной кнопки на тренинг Дениса Герасимова «Настройка холодного трафика для продвижения партнёрских ссылок». Я прошёл этот тренинг и рекомендую его всем — это без лишнего преувеличения, реальный способ заработка на партнёрских программах. Чем я в принципе и занимаюсь.

Тренинг Дениса Герасимова

Как добавить и настроить кнопку на REG.Site

В статье мы расскажем, как добавить кнопку на сайт с помощью модуля REG.Site и как настроить её дизайн.

Как добавить кнопку на сайт

1. 1.

   Перейдите в режим редактирования сайта.

2. 2.

   Нажмите на серый плюс в строке, в которую хотите вставить кнопку.

3. 3.

   Выберите модуль Кнопка:

   Если вы хотите привязать всплывающее окно к этой кнопке, используйте инструкцию.

4. 4.

   Введите текст (название кнопки):

5. 5.

   Чтобы добавить ссылку на кнопку, выберите пункт Ссылка и введите адрес в поле «URL ссылки кнопки»:

6. 6.

   В пункте «Как открывать ссылку» выберите параметр открытия ссылки:

7. 7.

   Нажмите на галочку, чтобы сохранить изменения.

Готово, кнопка добавлена на сайт. Далее рассмотрим, как изменить её дизайн.

Как настроить дизайн кнопки

Рассмотрим параметры, которые можно настроить во вкладке «Дизайн».

Выравнивание

В строке кнопку можно выравнивать по левому и правому краям, а также по центру:

Быстрая настройка цвета текста

В зависимости от фона, можно выбрать тёмный или светлый цвет текста:

Пользовательские стили

Чтобы получить доступ к расширенным настройкам вида кнопки, активируйте чек-бокс «Использовать пользовательские стили для элемента»:

Размер текста

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

Цвет текста

Цвет текста по умолчанию соответствует основному цвету вашей темы. Чтобы изменить цвет текста, настройте его при помощи палитры. Для этого нажмите на значок пипетки и выберите нужный оттенок:

Фон кнопки

По умолчанию у кнопки прозрачный фон, который вы можете изменить. В качестве фона можно выбрать:

• сплошной цвет,
• градиент,
• изображение.

Граница кнопки

Параметр «Кнопка Border Width» отвечает за толщину границы кнопки. Чтобы изменить толщину, отрегулируйте ползунок или введите значение вручную.

По умолчанию толщина границы составляет 2 пикселя. Чтобы удалить границу, установите значение 0 px.

Цвет границы по умолчанию соответствует вашей теме. Выберите нужный цвет из палитры цветов.

Закругление кнопки

Параметр «Кнопка Border Radius» отвечает за скругление углов кнопки. Чем больше значение, тем больше скругление. Отрегулируйте ползунок или поменяйте значение вручную:

Расстояние между буквами

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

Готово, вы настроили дизайн кнопки.

Как настроить дополнительные параметры

Теперь рассмотрим параметры, которые можно настроить во вкладке «Дополнительно».

Атрибуты

При помощи атрибутов можно настроить отношение между текущей страницей и страницей по ссылке. Для этого выберите пункт Атрибуты.

Из списка вы можете выбрать:

• bookmark — задаёт постоянную ссылку;
• external — ссылка с этим атрибутом будет открываться в новом окне браузера:
• nofollow — указывает поисковым роботам не посещать страницу по этой ссылке;
• noreferrer — скрывает информацию о том, откуда пришёл посетитель;
• noopener — как и noreferrer, скрывает информацию о странице, с которой открыта ссылка.

Видимость элемента на разных устройствах

В этом блоке вы можете скрыть модуль для определенных типов устройств: телефон, планшет и компьютер.

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

Теперь вы знаете, как добавить и настроить кнопку на сайте с помощью модуля REG.Site.

Помогла ли вам статья?

Да

1 раз уже
помогла

Добавьте кнопки регистрации на свой веб-сайт

Мы ценим вашу конфиденциальность. Мы используем файлы cookie и другие технологии, чтобы обеспечить надежность и безопасность сайта, адаптировать ваш опыт, измерить производительность сайта и представить соответствующие предложения и рекламу, как описано в нашей Политике конфиденциальности. Понятно!

Блог / Новости / Добавьте кнопки регистрации на свой сайт SignUpGenius Сборка 3. 132 Теперь легко добавить кнопки регистрации прямо на ваш веб-сайт или в блог и напрямую ссылаться на вашу регистрацию! После создания регистрации найдите ссылку «Веб-кнопки» в навигации на странице «Моя учетная запись». Наш простой мастер поможет вам настроить кнопку и предоставит фрагмент кода, который вы сможете опубликовать на своем сайте. Это отличный способ привлечь больше людей! Классическая высокая кнопка 150x90px, 5,3 КБ, GIF Зеленая высокая кнопка 150x90px, 5,3 КБ, GIF Классическая широкая кнопка 250x45px, 4,8 КБ, GIF Зеленая широкая кнопка 250x45px, 4,8 КБ, GIF Автор: Дэн Рутледж Сообщить о нарушении Комментарии Опубликовано Kelly Johnson в понедельник, 19 февраля 2018 г. , 12:12 по восточному поясному времени Недавно мы внесли обновления на сайт, и я рад помочь вам найти возможность создания веб-кнопки. . Чтобы создать веб-кнопку, войдите в свою учетную запись и нажмите «Инструменты» в левой части страницы вашей учетной записи. Здесь щелкните значок Web Button Builder. Выберите тип кнопки, которую вы хотите использовать, и в правой части экрана вы увидите варианты «Связать эту кнопку с: 9».0019 Все мои регистрации (отсортировать по названию) Все мои регистрации (отсортировать по группам) Все мои регистрации (отсортировать по дате начала) Все мои регистрации (отсортировать по дате окончания) У вас также будет возможность свяжите кнопку с отдельными подписками, если хотите. Следующее раскрывающееся меню позволит вам выбрать текст кнопки: Зарегистрироваться Купить сейчас Пожертвовать Вы увидите код, который нужно использовать, если вы планируете добавить кнопку на свой веб-сайт. Если вы хотите опубликовать ссылку на индексную страницу и не использовать веб-кнопку, вы увидите опцию: «Вот ссылка на страницу, показывающую все ваши регистрации» Скопируйте URL-адрес, и это будет уникальная ссылка на главную страницу. Разместите эту ссылку или отправьте ее по электронной почте, FB и т. д. Если вы добавите больше регистраций в учетную запись, новые регистрации также будут видны на главной странице. Надеюсь это поможет! Опубликовано Грегом Джолиссентом, 19 февраля 2018 г., 12:03 по восточному поясному времени Из приведенного выше примечания я увидел, что должен найти конструктор веб-кнопок на странице настроек моей учетной записи. Но у меня нет значка «Полезности», чтобы щелкнуть. Можете ли вы дать мне ссылку на конструктор веб-кнопок? Спасибо за помощь. Опубликовано Бетси Литл в среду, 30 августа 2017 г., 14:09 по восточному поясному времени Привет, Мэгги, Чтобы создать веб-кнопку, войдите в свою учетную запись, перейдите в левую часть страницы своей учетной записи и прокрутите вниз. список параметров, пока не появится надпись «Полезности». Прокрутите варианты логотипа, пока не увидите заголовок столбца: «Конструктор веб-кнопок». Следуйте инструкциям, чтобы создать кнопку. Вы увидите код, который нужно использовать, если вы планируете добавить кнопку на свой веб-сайт. Если вы хотите опубликовать ссылку на индексную страницу и не использовать веб-кнопку, нажмите созданную кнопку (над кодом), чтобы перейти на созданную индексную страницу. Скопируйте URL-адрес в браузере, и это будет уникальная ссылка на индексную страницу. Опубликуйте эту ссылку или отправьте ее по электронной почте, FB и т. д. Если вы добавите больше регистраций в учетную запись, они также будут видны на главной странице. Опубликовано Мэгги Оберманн в среду, 30 августа 2017 г., 11:40 по восточному поясному времени Где эта функция? нигде не вижу! Опубликовано Лизой Шнайдер в воскресенье, 26 сентября 2010 г. , 23:55 по восточному поясному времени Я использую SignupGenius почти год и люблю, люблю, люблю его! Я использую его для сложных спортивных регистраций, с несколькими играми и волонтерскими позициями, ужинами с удачей, регистрацией церковных волонтеров, закусками для радости и т. д., и всем это нравится! Такой замечательный и простой инструмент! Спасибо большое! Автор: Angel Rutledge, четверг, 26 августа 2010 г., 17:50 по восточному стандартному времени Отличная идея! Я не могу дождаться, чтобы использовать его. Разместите свой комментарий ПРИМЕЧАНИЕ. Вам не нужна учетная запись для размещения сообщений. Для возможности удаления создайте учетную запись.

Последние статьи блога 3 способа помочь вашей церкви служить больше Подробнее 4 способа регистрации Соответствие волонтеров потребностям Подробнее 5 советов по организации рождественских обедов Подробнее

Добавить квадратную кнопку онлайн-кассы «Купить» на свой веб-сайт | Центр поддержки Square

О чем эта статья?

Готовы получать быстрые онлайн-оплаты с помощью Square? Начать >

Приступая к работе со ссылками Square Online Checkout, вы также можете создать кнопку покупки и добавить ее на свой веб-сайт в качестве удобного способа направлять клиентов прямо на страницу оформления заказа. Создайте кнопку покупки, сгенерировав небольшой фрагмент HTML-кода, который можно встроить на свой веб-сайт, в блог, на целевую страницу или даже в текст электронного письма.

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

Создать кнопку «Купить»

Чтобы создать кнопку покупки Square Online Checkout:

1. В онлайн-панели Square перейдите к онлайн-кассе .

2. Выберите Добавить кнопку на веб-сайт .

3. Добавьте заголовок, текст кнопки, сумму и настройте периодичность платежа.

4. Добавьте дополнительное изображение и при необходимости настройте Дополнительные параметры .

5. Нажмите Продолжить , чтобы настроить стили кнопки покупки. Эти настройки будут применены ко всем вашим кнопкам покупки.

6. Выберите Скопировать , чтобы скопировать HTML-код и вставить его в место, которое принимает встраиваемый код.

Управление настройками кнопок «Купить»

Для управления настройками кнопок покупки, созданных с помощью Square Online Checkout:

1. В онлайн-панели Square перейдите к онлайн-кассе .

2. Выберите Настройки > Брендинг .

3. Выберите шрифт, цвет и форму кнопки.

4. Переключите настройки стиля кнопки, такие как Изображение , Заголовок и Цена .

5. Выберите Сохранить , когда закончите.

Все будущие кнопки покупки, которые вы создадите с помощью Square Online Checkout, будут иметь эти настройки по умолчанию.

Добавить кнопку «Купить» в WordPress

Нужно встроить кнопку покупки в WordPress? Узнайте больше в центре поддержки WordPress. org.

Вы можете добавить кнопку покупки на свой сайт WordPress.org. Чтобы добавить кнопку покупки в WordPress, узнайте, как встроить ее в веб-сайт WordPress, в центре поддержки WordPress.org.

Примечание . Встроенные кнопки покупки совместимы с платформой WordPress.org, но не с WordPress.com.

Добавить кнопку «Купить» в Squarespace

Нужно встроить кнопку покупки на Squarespace? Узнайте больше в центре поддержки Squarespace.

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