Привет!

В статье Невозможно поставить кнопку для запуска всплывающей формы от Mailerlite. Решено я показал, как можно частично обойти ограничения WordPress на вставку onclick в записи.

Там же пообещал рассказать, как делать любые кнопки.

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

Но вся проблема в том, что непосредственно в php-файлы вы шорткоды не вставите, а в данном конкретном случае не было никакой другой возможности обойти ограничения WordPress, как только работать через FTP непосредственно с php-файлами.

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

Поехали

Создание кода кнопки

Начинающим проще всего создавать кнопку с помощью генератора кода CSS.

Я перепробовал штук 7 разных онлайн-генераторов.

Самый оптимальный и удобный мне показался вот этот

http://itpride.net/css3buttons

Есть ещё вот такой

http://itpride.net/css3buttons

Им можно генерить не только кнопки. Ещё и формы, иконки, ленты.
Но, видимо, универсальность пошла не в пользу функциональности. Украшательств, удобства и возможностей работы с кнопками в нем поменьше, чем у первого.

Итак, захОдите и видите интерфейс

 

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

Сильно сомневаюсь, что есть смысл как-то настраивать вкладку При нажатии, но если есть желание...

Когда результат готов и полностью устраивает, жмите на Получить код и увидите 2 кода: CSS и Html

 Внимание! Генератор вас не авторизует и коды, следовательно, не сохраняет. Сделали — скопируйте и сохраните. Или сразу на сайт, или создайте свою библиотеку кнопок. 

Установка кнопки на сайт

Через FTP открывайте файл style.css темы.

 Рекомендую делать это через Notepad++ 
 А если у вас есть дочерняя тема, то настоятельно рекомендую редактировать файл style.css именно в дочерней теме. 

Вставляете код в файл. Например, вот так

Красными стрелками я показываю КАК комментировать коды в файле. Настоятельно рекомендую комментить всё, что вы или ваш вебмастер добавляете. Экономит впоследствии тонны времени.

Теперь копируйте код Html из генератора и вставляйте в нужное место на нужной странице. Вместо решетки «#» вставьте нужную ссылку на страницу, которая должна открываться при нажатии на кнопку.

 Если хотите сделать несколько кнопок, то обратите внимание — генератор создает все их с одним названием «button». Если захотите сделать ещё одну кнопку, то поменяйте в CSS коде «button» на «button2», например. Не забудьте то же имя поставить в коде Html. 

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

Если кнопка получилась широкая, то она может не поместиться по ширине экрана смартфона.

Вот, например, как она выглядит на мониторе десктопа

А вот так на экране смартфона

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

Это не проблема.

Открываем style.css и в конец кода кнопки добавляем display: inline-block;

Вот так

Результат — Это всё.

P.S. Хотите получать уведомления о новых статьях этого блога? Нажмите на эту кнопку -

Хочу сразу узнавать о новых публикациях!