Кнопки для сайта на Html и Css — как создать и добавить в шаблон сайта

Как сделать ее красивой и информативной?

Теперь переходим к самой интересной части. Для создания кнопочки с надписью, но без рисунка, вы можете использовать либо Html тег ссылок A (здесь читайте про гиперссылки), либо Html тег для создания кнопки BUTTON.

При этом пространство между открывающими и закрывающими тегами (A или BUTTON) должно быть заполнено текстом, который вы хотите видеть на создаваемой кнопке. Причем, этот текст должен быть заключен в двойные открывающие и закрывающие Html теги SPAN. Звучит устрашающе, не правда ли?

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

<a class="sexybutton" href="#"><span><span>Просто красивая штучка</span></span></a>

и получаем такую кнопочку:

Просто красивая штучка

Причем, это реально рабочая кнопка. Нажав на нее вы попадете в начало страницы. Это задается атрибутом HREF тега A. Там прописан переход к началу страницы «#» (хеш).

В случае с тегом BUTTON, код и получаемая кнопочка будут выглядеть так:

<button class="sexybutton"><span><span>Красивая кнопочка для сайта</span></span></button>

Для того, чтобы кнопка на сайте выглядела более эффектно, в конструкторе предусмотрена возможность добавления иконки (изображения 16 на 16 пикселей) до или после надписи.

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

<button class="sexybutton"><span><span><span class="ok">KtoNaNovenkogo.ru</span></span></span></button>

Видите, у нашей кнопки перед надписью появилась галочка, которая соответствует классу OK, прописанному во внутреннем теге SPAN. А как сделать так, чтобы иконка была на кнопочке не перед надписью, а после нее?

Довольно просто. Нужно добавить через пробел к названию CSS класса, прописываемого в Html теге SPAN, слово AFTER. В результате мы получим такую вот красотищу:

<button class="sexybutton"><span><span><span class="ok after">KtoNaNovenkogo.ru</span></span></span></button>

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

Все это вы сможете посмотреть, открыв файл sexybuttons.css в редакторе Notepad++. В самом низу этого файла вы увидите группу свойств, описывающих соответствие названия класса и иконки (прописан путь до файла иконки), которая будет выводиться кнопке от SexyButtons при использовании данного класса. Вот начало этой группы свойств:

Добавление на них красивых иконок

Если вы захотите добавить иконку на кнопочку не описанную в этих CSS свойствах, то вам придется добавить к этой группе строку с новым названием нового класса для тега SPAN и Урлом файла нужной иконки, например так:

.sexybutton span.ktonanovenkogo		{ background-image: url(images/icons/silk/application_form_edit.png) !important; }

Теперь можно будет использовать класс KTONANOVENKOGO для добавления красивой иконки:

<button class="sexybutton"><span><span><span class="ktonanovenkogo">Кнопочка для сайта с иконкой</span></span></span></button>

Кроме описанного выше способа добавления на создаваемые кнопки иконок, не описанных в файле sexybuttons.css, можно воспользоваться альтернативным способом. В этом случае, вместо третьего SPAN используется Html тег IMG с прописанным Урлом нужной иконки, который добавляется внутри двух SPAN до или после надписи на кнопочке.

Например, красотища, ведущая на предыдущую страницу, можете выглядеть так:

<button class="sexybutton"><span><span><img src="https://ktonanovenkogo.ru/wp-content/themes/SexyButtons/images/icons/silk/resultset_previous.png" />Back</span></span></button>

Если нужно поместить иконку после надписи, то нужно будет добавить в IMG атрибут CLASS="AFTER" и прописать сам IMG после надписи на кнопке:

Как сделать кнопки с разными цветами и размерами шрифтов

По умолчанию имеется возможность создать красоту со шрифтами следующих размеров: нормальный, средний и большой. Для использования среднего и большого размера шрифта вам нужно будет дописать через пробел в коде к CSS классу SEXYBUTTON, соответственно, классы SEXYMEDIUM и SEXYLARGE.

Нормальный шрифт надписи на кнопочке будет выглядеть так:

Добавить кнопку на сайт со средним размером шрифта можно с помощью такого вот кода:

Добавить кнопочку с большим шрифтом можно с помощью такого кода:

Как вы можете видеть, вариант с большим шрифтом получился разорванным, что говорит об ограничении на максимально возможную длину кнопки. Имейте это в виду.

В конструкторе SexyButtons предусмотрены две дополнительные цветовые схемы кнопок- оранжевая и желтая. Для их применения, точно так же как и при изменении размера шрифта, вам нужно будет дописать через пробел в коде к CSS классу SEXYBUTTON, соответственно, CSS классы SEXYORANGE и SEXYYELLOW. Оранжевая кнопочка будет формировать и выглядеть так:

<a class="sexybutton sexyorange" href="#"><span><span>Оранжевый шедевр</span></span></a>

Желтая — так:

<a class="sexybutton sexyyellow" href="#"><span><span>Желтый шедевр</span></span></a>

Оформление под названием Simple отличается от оформления стандартных кнопок. Для использования Simple достаточно будет дописать через пробел в коде к CSS классу SEXYBUTTON, соответственно, CSS класс sexysimple:

<button class="sexybutton sexysimple">KtoNaNovenkogo.ru</button>

Simple имеет еще восемь возможных цветов (по умолчанию кнопка будет черной). Цвет кнопочки Simple можно задать, дописав через пробел к CSS классам SEXYBUTTON SEXYSIMPLE еще и CSS класс, отвечающий за цвет. Имеется возможность использовать один из этих CSS классов: SEXYBLACK (можно не добавлять, т.к. он идет по умолчанию и без добавления третьего класса), SEXYTEAL, SEXYMAGENTA, SEXYRED, SEXYORANGE, SEXYGREEN, SEXYBLUE, SEXYPURPLE, SEXYYELLOW.

В результате получим, например, такие красивые и разноцветные кнопки на сайте:

Вот такой вот светофор получился. Можно еще изменять размер кнопочек Simple, дописывая по аналогии с цветами следующие классы: SEXYSMALL, SEXYMEDIUM (это размер используется по умолчанию), SEXYLARGE, SEXYXL, SEXYXXL, SEXYXXXL.

В результате получим такие кнопки разного размера:

Замечательный, на мой взгляд, конструктор или же фреймворк.