Как сделать двойную кнопку

Как сделать кнопку в посте или на странице в WordPress

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

Способы добавление кнопки на сайт

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

Более подробно рассмотрим все варианты.

Плагины добавления кнопки через шорткод

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

Shortcodes Ultimate

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

Пишу достаточно подробно, так как сам использую этот плагин, имею возможность показать результат в действии

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

После установки плагина, над редактором появится кнопка [Вставить шорткод]. Кликаем на нее

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

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

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Далее вы заполняете все нужные поля:

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

В итоге у вас получится что-то такое ( а результат в действии вы видите под картинкой)

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

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

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

Резюме: плагин достаточно удобен, учитывая, что это комбайн и дает возможность не только ставить кнопки, но много других украшений (блоки внимания, буквицы, разделители, списки и др.) — рекомендую. Плагин русифицирован, даже более того делается русскоязычным разработчиком.

Button Plugin MaxButtons

Под номером два идет не менее популярный плагин. У него две функции — это кнопки социальных сетей и кастомные кнопки. Кнопки шаринга — это тема иной статьи. Мы рассмотрим создание произвольных кнопок.

В отличие от Shortcodes Ultimate, здесь нужно заранее создать кнопку, а уже потом ее вставить в пост. В этом есть свои недостатки и прелести. Преимуществом будет быстрое добавление готовой уникальной кнопки. Недостатки — нужно выходить из поста, чтобы сформировать новую кнопку. и плагин не русифицирован (хотя, когда это нас останавливало).

Итак создаем новую кнопку:

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

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

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

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

В редакторе он сам не появляется (только в про-версии за 49 баксов). Также по цене 5 баксов вы можете купить уже готовые наборы кнопок от maxbutton. Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Для быстрой вставки шорткодов можно воспользоваться дополнительным плагином AddQuicktag (о нем я писал в статье про блоки внимания). Но это еще один плагин, что может утяжелять сайт.

Резюме: плагин интересен только в платной версии

Button Pro — CSS3

Button Pro — это простой в использовании и красочный набор кнопок, выполненный в CSS3.
В пакет также входит набор кнопок, используемых известными веб-сервисами (google, twitter, facebook, wordpress), воссозданными на чистом CSS3.

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Имеется только платная версия (простая лицензия 4$, расширенная 20$). Купить его можно по ссылке.

WPi Designer Button Shortcode

Это мини-дизайнерская студия на вордпресс позволяет генерировать уникальные и стильные CSS3 кнопки в постах для ссылок и призыва к действию (CTA). Поддерживает функции:

После установки нужно сделать несколько действий в настройках. Плагин не русифицирован, но онлайн-переводчик вам в помощь. Переходим в глобальные настройки и делаем как на скриншоте:

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Там же — в глобальных настройках можно включить кнопки «поделиться» и кнопки call-to-action. Дальше вы можете насоздавать бесконечное количество нужных стилей и кнопок. Вставляются они через редактор — там появляется дополнительный значок.

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

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

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Чтобы создать кнопку сначала идем Настройки — Buttom WPi — button — добавить новую. Откроется страница, где будем создавать кнопку. Введите ее название и сразу обратите внимание на номер Id и шорткод (зеленые стрелки на скрине). Выбрать стили из предложенных или ввести прессет из ранее созданных вами стилей.

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Далее можем выбрать иконку из набора:

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Можно также поиграть с настройками ссылок:

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

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

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Редактор сам подставить шорткод.

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

Есть и другие плагины, но на мой взгляд — эти более удобные в работе, имеют необходимые функции и выдают более современные кнопки.

Плагин добавления кнопки без шорткода

Шорткод — это удобно. Но может случиться так, что разработчик забросил плагин и с обновленным движком плагин конфликтует. Или вы решили заменить плагин на новый. Отключая вышеописанные плагины, вы можете получить мусорный код в текстах, кнопки просто пропадут оставив после себя что-то подобное:

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Поэтому, следующий плагин — это суперрешение создания кнопок на css3 без шорткодов.

Forget About Shortcode Buttons

Классный плагин, который не всталяет шорткоды. Устанавливается обычным путем, мусорный код не вставляет и главное, все кнопки остаются на месте даже после удаления плагина. Идеален для малостраничников — сделал и удалил все лишние плагины.

Чтобы добавить кнопку:

В появившемся окне, вводите текст кнопки, URL-адрес и выберите параметры цвета/стиля. Так же, как и с MaxButtons, вы можете просмотреть изменения в режиме реального времени: Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

В принципе, хотя плагин не русифицирован — все интуитивно понятно. Кнопки получаются вполне себе симпатичные.

Резюме: отличный плагин, рекомендую для использования. Особенно если у вас не стоит Shortcodes Ultimate. На сегодняшний день это, пожалуй, самый быстрый и простой способ, чтобы сделать активные кнопки для WordPress, которые будут все время работать на вас и повышать конверсию ваших публикаций.

Как добавить кнопку в водпресс с помощью внешнего генератора

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

Кому это подходит? Вебмастерам и блогерам, которым на проекте нужно 1 — 2 кнопки и ставить плагин нет необходимости.

Daruse.ru

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

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

С моей темой вордпресс кнопки не хотели устанавливаться корректно. Пришлось делить: отдельно стили и код кнопки (есть там такая опция). Залазить в настройки css та еще работа.

Резюме: слишком много телодвижений — проще установить плагин Forget About Shortcode Buttons (см.выше). Хотя вы можете попробовать.

Maxzon.ru

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

Есть возможность настроить вид кнопки в обычном состоянии, при наведении мышки и при нажатии. Можно настраивать размеры самой кнопки, шрифта, а также все цвета.

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Сервис сразу выдает два кода:

Резюме: в целом имеет место быть, но опять же необходимо знание как вставить код.

Добавление кнопки без плагина, через CSS/HTML код

Простая HTML кнопка

Старый как веб-мир способ — прописать в коде тег button:

button > Seodelux.ru button >

Кнопку можно выровнять и прописать ей урл, будет выглядеть так:

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

Редактор блоков

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

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Жмем на плюсик слева вверху. Выбираем блок «кнопка».

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Настраиваем стиль кнопки и цвет текста.

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Можно также настроить:

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Всё. Очень просто, без дополнительных плагинов, настройки html кодов и правки файлов сайта. Водпресс- это сила, надо просто полностью использовать его функционал.

Заключение

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

Спасибо, что дочитали, надеюсь информация была полезна. Смело можете поставить рейтинг. Вам несложно, а мне приятно.

Источник

Двойная рамка с использованием CSS

Однако существует еще несколько методов для создания такого эффекта. Причем очевидное использование фонового изображения является весьма далеким от идеала.

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

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопкуКак сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Метод 1: border и outline

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

Метод 2: псевдо элемент

Данный метод требует абсолютного позиционирования рамки:

Метод 3: тень

Естественно, поддержка свойства box-shadow ограничена новыми браузерами.

Метод 4: Дополнительный элемент div

В данном методе используется внешний элемент

Внешний элемент имеет немного больший размер, что создает иллюзию двойной рамки.

Метод 5: свойство border-image

Еще одним новым методом является часто забываемое свойство CSS3 border-image :

Знаете другой метод?

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.impressivewebs.com/multiple-borders-css/
Перевел: Сергей Фастунов
Урок создан: 17 Ноября 2011
Просмотров: 74250
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Источник

3D кнопки с помощью CSS3

Здравствуй, дорогой хабрадруг! Сегодня мы научимся создавать объемные кнопки CSS3! Они основаны на популярной PSD фриби от Orman Clark для его веб-сайта Premium Pixels. Мы постараемся создать копию этих кнопок с помощью CSS с минимальным количеством кода HTML.

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Заметка автора: Orman любезно разрешил нам кодировать любую из его фриби, так что в будущем ждите еще туториалы!

Шаг 1: Создаем документ HTML

Мы начнем с создания нового документа HTML. Он будет основан на HTML5 boilerplate для того, чтобы у нас была удобная отправная точка. Теперь мы добавим список с ссылками. Вот в принципе и все, спасибо CSS3 за то, что мы не должны использовать дополнительные дивы и спаны.
Каждому пункту списка мы присвоим класс ‘buttons’. И так как Orman использовал различные цвета, мы назначим каждой кнопке свой собственный цвет в виде класса.

Это все, что нам понадобится на данном этапе.

Шаг 2: Основные правила CSS

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

Теперь применим правила для различных цветов. Например, для серого. Все остальные цвета можно посмотреть в демо.

У вас должно получиться что-то вроде этого. Выглядит довольно-таки солидно, если на дворе 2008 г.
Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Шаг 3: Двойные рамки!

Если вы внимательно посмотрите на конечный результат, то увидите, что по периметру всей кнопки расположена тонкая линия. Для осуществления этого эффекта мы будем использовать псевдо-элементы :before и :after.

При добавлении цвета кнопки выглядят гораздо лучше.

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Шаг 4: Немного магии CSS3

Теперь приступим к непосредственной части CSS3. Начнем с закругленных углов:

Естественно элементы :before и :after так же нуждаются в закругленных углах.

И наконец мы применим градиенты, внутренню тень и тень для текста. Чтобы избежать багов в IE6, добавим state :visited.

Наш конечный результат, не так уж и плохо!

Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Шаг 5: Мы ничего не забыли?

В своем дизайне Orman так же предусмотрел состояние :active. Поэтому мы просто обязаны добавить его к нашему коду.
Мы разместим эту часть кода под правилами для различных цветов.

Вот, что у нас получится:
Как сделать двойную кнопку. Смотреть фото Как сделать двойную кнопку. Смотреть картинку Как сделать двойную кнопку. Картинка про Как сделать двойную кнопку. Фото Как сделать двойную кнопку

Шаг 6 (по желанию): Старые браузеры

Итак, мы создали приятные кнопки CSS3, которые работают во всех современных браузерах. Но как быть с Internet Explorer 8 и ниже. В этих браузерах нет поддержки ни теней для текста, ни градиентов.
Для решения этой проблемы мы можем использовать javascript библиотеку Modernizr, которая может определять, поддерживает ли ваш браузер CSS3 и HTML5. Библиотека не исправляет проблемы, она лишь предлагает альтернативный стиль.
Во-первых, мы создадим собственную версию Modernizr, чтобы не таскать за собой огромный javascript. Это можно сделать на их веб-сайте. Как только мы вставили javascript в наш документ, необходимо определить правила разных классов для альтернативного стиля. Мы будем использовать изображения для тех браузеров, которые не поддерживают border-radius и градиенты.

Заключение

Таким образом, у нас получились симпатичные кросс-браузерные кнопки CSS3. Возможно, вам покажется, что здесь слишком много кода для 10 кнопок, но это всего лишь демонстрация того, что CSS3 может или не может. Вы можете делать с этим что угодно! Надеюсь, мой урок был полезен, спасибо за внимание!

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *