В этой статье я расскажу, как сделать красивую HTML кнопку для сайта. Ранее я писал пост о том, как можно самому сделать красивую кнопку для сайта. Сегодня же я хотел бы предложить несколько готовых вариантов кнопок.
Важно понимать! Кнопка представляет собой "красиво оформленную ссылку" с помощью CSS свойств. Для этой ссылки необходимо прописать url-адрес, куда эта ссылка должна ссылаться. Также это может быть не ссылка, а элемент <button></button>, к которой может быть привязано какое либо действие с помощь jQuery.
Bootstrap кнопки - как вставить на сайт?
Если Ваш сайт использует CSS фреймворк Bootstrap, то CSS стили кнопок уже прописаны в CSS файлах. Вам нужно лишь использовать их! Ниже пример кнопки с использованием Bootstrap .
<button class="btn btn-warning">Это желтая Bootstrap кнопка</button>
<button class="btn btn-success">Это зеленая Bootstrap кнопка</button>
<button class="btn btn-primary">Это синяя Bootstrap кнопка</button>
Как понять, используется ли Bootstrap на сайте? - Откройте любую страницу вашего сайта. Нажмите на клавиатуре клавиши Ctrl+U. Откроется исходный HTML код страницы. С помощью клавиш Ctrl+F воспользуйтесь поиском по коду. В поисковое поле введите слово bootstrap. Если на сайте используетс фреймворк Bootstrap, то скорее всего будут обнаружены строки, где подключаются стили и скрипты Bootstrap. К примеру так:
Подробнее о Bootstrap кнопках рекомендую прочесть на официальном сайте Бутстрап.
Возможные варианты готовых кнопок - на чистом CSS и HTML
Устанавливаем кнопки на сайт
Если Ваш сайт не использует CSS фреймворки, то можно вставить кнопки на сайт с помощью чистого CSS и HTML кода.
Однако, я настоятельно рекомендую изучить и начать использовать Bootstrap. Подключить его можно с помощью нескольких строк кода. Читайте как подключить Bootstrap на официальном сайте.
Подключаем файл стилей
Чтобы установить кнопки на сайт, необходимо подключить файл стилей в секцию <head></head> вашего сайта. У WordPress сайта это делается в файле header.php. Это можно сделать в админке WordPress на вкладке "Внешний вид -> Редактор тем". Затем находим файл header.php и вставляем перед закрывающим тегом </head> следующий код:
<link rel="stylesheet" type="text/css" media="all" href="https://vermutoff.github.io/onwordpress-custom-buttons/onwordpress-buttons.css" />
Внимание! Возможны необратимые последствия!
Если Вы впервые делает подобную операцию или не совсем точно понимаете, что именно делаете, то обратитесь к помощи профессионалов! Подобная операция может НЕГАТИВНО повлиять на внешний вид и функциональность сайта!
от 500 руб.
Если Ваш сайт работает не на WordPress, то необходимо подключиться к сайту по FTP и добавить эту строку кода в шаблон сайта.
Если стилями кнопок разобрались. Теперь, для того чтобы вставить кнопку на сайт, вам необходимо скопировать HTML код нужной кнопки и вставить в то место, где должна появиться кнопка.
Вставляем HTML коды кнопок на сайт
Ниже приведен HTML код кнопок, который необходимо вставить на сайт. Внешний вид каждой кнопки определяется тем, какой класс ей присвоен в атрибуте class.
Рекомендую поменять атрибут href у кнопки, чтобы ссылка ссылалась на нужную Вам страницу.
Кнопка 1а
ЗАКАЗАТЬ<a class="button_a button_1 vermut_button" href="#">ЗАКАЗАТЬ</a>
<button class="button_a button_1 vermut_button">ЗАКАЗАТЬ</ button >
Кнопка 1б
ЗАКАЗАТЬ<a class="button_b button_1 vermut_button" href="/">ЗАКАЗАТЬ</a>
<button class="button_b button_1 vermut_button">ЗАКАЗАТЬ</button>
Кнопка 1в
ЗАКАЗАТЬ<a class="button_v button_1 vermut_button" href="/">ЗАКАЗАТЬ</a>
<button class="button_v button_1 vermut_button">ЗАКАЗАТЬ</button>
Кнопка 2а
ЗАКАЗАТЬ<a class="button_a button_2 vermut_button" href="/">ЗАКАЗАТЬ</a>
<button class="button_a button_2 vermut_button">ЗАКАЗАТЬ</button>
Кнопка 2б
ЗАКАЗАТЬ<a class="button_b button_2 vermut_button" href="/">ЗАКАЗАТЬ</a>
<button class="button_b button_2 vermut_button">ЗАКАЗАТЬ</button>
Кнопка 2в
ЗАКАЗАТЬ<a class="button_v button_2 vermut_button" href="/">ЗАКАЗАТЬ</a>
<button class="button_v button_2 vermut_button">ЗАКАЗАТЬ</button>
Кнопка 3а
ЗАКАЗАТЬ<a class="button_a button_3 vermut_button" href="/">ЗАКАЗАТЬ</a>
<button class="button_a button_3 vermut_button">ЗАКАЗАТЬ</button>
Кнопка 3б
ЗАКАЗАТЬ<a class="button_b button_3 vermut_button" href="/">ЗАКАЗАТЬ</a>
<button class="button_b button_3 vermut_button">ЗАКАЗАТЬ</button>
Кнопка 3в
ЗАКАЗАТЬ<a class="button_v button_3 vermut_button" href="/">ЗАКАЗАТЬ</a>
<button class="button_v button_3 vermut_button">ЗАКАЗАТЬ</button>
Для того, чтобы кнопка вела на какую либо страницу вашего или чужого сайта, необходимо заменить href="/" например на href="https://onwordpress.ru".