Добрый день, дорогие посетители моего сайта! Создание кнопки — это тот вопрос, с которым вы точно столкнетесь, если у вас есть собственный сайт или вы учитесь создавать таковые. Это могут быть кнопки в меню, или кнопки для перехода на сторонний сайт. В сегодняшней статье я хочу описать процесс создания кнопки для вашего сайта, созданного на базе WordPress. Хотя, я думаю, это довольно универсальный способ и подойдет для любого сайта, каким бы образом он не был сконструирован. Единственное, что необходимо, это иметь доступ к файлу .css и обладать базовыми навыками работы в PhotoShop. Кстати, последнее тоже необязательно. Сейчас хватает онлайн-сервисов по созданию картинок, кнопок, логотипов, в которых с легкостью можно разобраться.
Создание кнопки в PhotoShop
Какая задача стояла передо мной. Мне нужно было создать кнопку, при наведении на которую курсором мыши, она меняла свой цвет, а цвет текста внутри кнопки оставался прежним. Средствами WordPress у меня не получилось достичь этого. Цвет фона кнопки менялся без проблем, но сам текст внутри кнопки (это по сути ссылка) менял свой цвет тоже. Это меня не устраивало. После нескольких неудачных попыток поменять файл .css, решила нарисовать кнопки сама. Использовала для этого PhotoShop. Вот пример моих кнопок.
Прописываем стили кнопки в файле .css
Кнопки готовы. Остается вставить несколько строчек в файл .css и небольшой html-код в сам текст.
.button_new {
background:url(button_red.jpg);
width: 275px;
height: 62px;
}
. button_new:hover {
background:url(button_black.jpg);
width: 275px;
height: 62px;
}
Этот код необходимо вставить в файл .css. Я его нашла в консоле моего сайта на WordPress, раздел “Внешний вид”, пункт “Редактор тем”. Кстати, перед тем как вносить изменения в этот файл, советую сделать его копию и сохранить в текстовом редакторе, чтобы в любой момент вернуть все назад.
Класс button_new соответствует красной кнопке, которая будет отображаться на сайте. А конструкция button_new:hover поменяет нашу красную кнопку на черную, при наведении на нее курсором мыши. width и height – это ширина и высота наших кнопок. После внесения изменений в файл .css не забудьте нажать на кнопку “Обновить файл”.
Добавляем HTML-код кнопки на сайт
Теперь идем непосредственно в то место на сайте, где нужно вставить саму кнопку, у меня это моя статья. В режиме редактирования записи нажимаю на + (Добавить блок)
И из предложенных вариантов выбираю HTML-код
Место, где я буду вставлять HTML-код будет выглядеть так:
Здесь напишем следующее:
<div align="center"><a href="ваша ссылка" target="_blank"><div class="button_new"> </div></a></div>Вот и все. Как видите, создание кнопки не заняло у нас много времени и сил. И вот результат нашей с вами работы: