Красивые HTML кнопки для сайта – готовый код

В этой статье я расскажу, как сделать красивую 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 кнопках рекомендую прочесть на официальном сайте Бутстрап.

Пожкдючение Bootstrap в HTML код страницы

Возможные варианты готовых кнопок - на чистом CSS и HTML

Кнопки для сайта - html и 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".