Недавно один из наших читателей попросил у нас учебник о том, как добавить кнопки-призраки CSS в свои темы WordPress. Призрачные кнопки — это прозрачные кнопки призыва к действию, которые очень популярны в наши дни. В этой статье мы покажем вам, как вы можете легко добавить CSS-кнопки-призраки в вашу тему WordPress, используя совсем немного CSS и HTML.
Что такое кнопка-призрак?
Кнопка-призрак — это терминология веб-дизайна, используемая для обозначения прозрачных кнопок, которые сливаются с фоном и заметны только благодаря рамке вокруг них.
Создать обычные кнопки призыва к действию в WordPress довольно просто. Вы даже можете добавить их в ваши посты и страницы без написания CSS или HTML. Поскольку кнопки-призраки — это новая тенденция, не существует специальных плагинов для создания кнопок в стиле призрака.
Добавление кнопок-призраков в WordPress
Как упоминалось ранее, для добавления кнопок-призраков в вашу тему WordPress вам понадобится немного CSS и HTML.
Сначала вам нужно добавить следующий код CSS в таблицу стилей вашей темы или дочерней темы.
Вам понадобится FTP-клиент для подключения к вашему веб-серверу. После подключения перейдите в папку /wp-content/themes/Your-Theme/ и найдите стиль.css файл. Откройте этот файл для редактирования в текстовом редакторе, а затем вставьте этот фрагмент кода в нижней части файла. (Узнайте больше о вставке фрагментов кода из Интернета в WordPress).
.ghost-button < display: inline-block; width: 200px; padding: 8px; color: #fff; border: 2px solid #fff; text-align: center; outline: none; text-decoration: none; transition: background-color 0.2s ease-out, color 0.2s ease-out; >.ghost-button:hover, .ghost-button:active
Сохраните изменения и загрузите файл обратно на сервер.
Теперь каждый раз, когда вы хотите отобразить кнопку, все, что вам нужно сделать, это добавить
Например, если вы хотите добавить ссылку на скачивание, то создайте ссылку на скачивание, как вы обычно это делаете. Затем переключитесь в текстовый редактор, чтобы увидеть HTML-форматирование.
Найдите HTML-код ссылки на скачивание и добавьте CSS-класс следующим образом:
Сохраните или обновите свой пост, а затем просмотрите его. Вместо обычной ссылки вы увидите красивую кнопку-призрак.
Мы надеемся, что эта статья помогла вам узнать, как добавить кнопку-призрак в вашу тему WordPress. Вы также можете посмотреть наше руководство о том, как добавить кнопки в WordPress без использования шорткодов
Источник: www.wpbeginner.com