Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Кнопки для сайта — где скачать и как бесплатно сделать красивую кнопку для сайта онлайн

Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. В эфире очередная статья из рубрики Инструменты вебмастера. Сегодня мы узнаем, где можно будет скачать кнопки для сайта для того, чтобы потом можно было бы быстрого и совершенно бесплатно добавить кнопку на сайт (разработчик считает, что созданные им кнопки для сайта сексуальные — Sexy Buttons, но тут, конечно же, кому как и что кажется сексуальным).

Когда вам потребуется добавить кнопку Sexy Buttons в нужное место сайта, вы сами сможете задавать, что будет написано на кнопке, как она будет выглядеть, какая иконка на кнопке для сайта будет отображаться и многое другое. Причем все это задается и настраивается очень быстро и просто, достаточно будет лишь скачать кнопки в наборе Sexy Buttons и добавить их на сайт (в папку на сервере хостинга).

Создание кнопок для сайта в Sexy Buttons

Автор сайта Sexy Buttons предлагает вам заменить скучные кнопки, используемые на большинстве веб ресурсов, на оригинальные и красивые кнопки для сайта, выглядящие значительно более привлекательно.

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

Надписи на кнопках вы задаете сами, а рисунки (иконки), стоящие до и после надписей на кнопке для сайта, можно выбрать из набора, идущего в комплекте с Sexy Buttons (около полутора тысяч рисунков-иконок). Получается что-то вроде бесплатного набора для создания и добавления кнопок на сайт, а не уже готовые кнопки с надписями, нарисованные в Фотошопе или же созданные на рассмотренном нами ранее онлайн сервисе Da Button Factory (Da Button Factory — сервис для создания и тонкой настройки красивых кнопок для вашего сайта).

Какая именно надпись и рисунок будут на кнопке для сайта, вы сможете задавать в строке кода, которую нужно будет прописать в нужном месте шаблона вашего веб ресурса для отображения кнопки в нужном месте вебстраницы. Т.е. кнопка для сайта получается составная: контур кнопки (изменяющийся при наведении мыши), надпись на кнопке (задаете сами) и рисунок(выбираемый из полутора тысяч вариантов), который может быть расположен до или после надписи.

Как сделать и добавить кнопку для сайта

Если вы решили испробовать данный бесплатный конструктор кнопок на своем ресурсе, то для начала вам нужно будет скачать кнопки для сайта Sexy Buttons с онлайн сервиса автора. На странице загрузки скачайте последнюю версию кнопок для сайта Sexy Buttons (на данный момент это SexyButtons v1.1). Скачали? Теперь распакуйте архив с кнопками SexyButtons_v1.1.zip и посмотрите, что находится внутри. Папка IMAGES содержит две подпапки: ICONS и SKINS. В папке ICONS лежит папка SILK, в которой содержатся изображения для ваших будущих кнопок для сайта размером 16 на 16 пикселей.

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

Теперь вам нужно подключиться к серверу вашего хостинга по протоколу FTP и скопировать на сервер всю папку SexyButtons (можно не копировать файлы changelog.txt и index.html). В какое именно место на сервере хостинга вы скопируете эту папку не так важно. Я, например, для этого WordPress блога KtoNaNovenkogo.ru разместил папку с кнопками для сайта по следующему адресу: wp-content/themes/SexyButtons. Копирование файлов будущих кнопок для сайта займет какое-то время, особенно если вы оставили все файлы изображений в папке SexyButtons\images\skins\, не удалив те, которые не планируете использовать в дальнейшем для оформления внешнего вида кнопок на своем сайте.

Как поставить кнопку на сайт — добавляем CSS свойства в Joomla, WordPress и SMF

Давайте перейдем непосредственно к тому, как добавить кнопку Sexy Buttons на сайт. Следующим шагом после окончания копирования содержимого папки SexyButtons на сервер, будет прописывание в код шаблона вашего сайта строки, предписывающей браузерам при загрузке любых страниц вашего веб ресурса вместе с HTML кодом подгружать еще и файл каскадных таблиц стилей sexybuttons.css.

В этом случае все кнопки, созданные вами с помощью Sexy Buttons будут правильно отображаться на всех страницах вашего сайта. Прописать эту строчку Html кода, призванную подгружать файл стилей кнопок sexybuttons.css, нужно между открывающим и закрывающим тегами HEAD в шаблоне вашего вебсайта.

Теги HEAD всегда находятся в самом верху кода любой HTML странички и между ними прописываются различные мета-теги, которые призваны сообщать определенную информацию браузерам, в которых открывается данная страница, и поисковым системам. Нам нужно будет прописать между открывающим и закрывающим тегами HEAD путь до файл CSS, который позволит сделать красивыми наши бесплатные кнопки для сайта от Sexy Buttons:

<link rel="stylesheet" href="http://ktonanovenkogo.ru/wp-content/themes/SexyButtons/sexybuttons.css" type="text/css" />

Только, естественно, вы должны будете заменить ссылку http://ktonanovenkogo.ru/wp-content/themes/SexyButtons/sexybuttons.css на путь до файла CSS будущих кнопок для сайта sexybuttons.css, который для вашего ресурса целиком и полностью будет зависеть от того, куда вы скопировали папку SexyButtons на первом шаге установки конструктора кнопок Sexy Buttons.

Как поставить кнопку Sexy Buttons на сайт в WordPress

В случае блога на WordPress для вставки данной строки кода вызова CSS свойств для создание красивых кнопок для сайта, вам нужно будет открыть на редактирование файл header.php из папки с используемой вами темой оформления WordPress: wp-content/themes/Папка_с_вашей_темой_оформления. Открываете файл header.php в редакторе (например, Notеpad++) и в самом его начале находите открывающий Html тег HEAD, который в моем случае выглядит так:

<head profile="http://gmpg.org/xfn/11">

В любом месте за ним, но до закрывающего тега HEAD:

</head>

прописываете строчку с Html кодом подключения CSS свойств для наших красивых кнопок Sexy Buttons, например так:

<link rel="shortcut icon" type="image/ico" href="http://ktonanovenkogo.ru/wp-content/themes/Test/favicon.ico" />
<link rel="stylesheet" href="http://ktonanovenkogo.ru/wp-content/themes/Test/style.css" type="text/css" media="screen" />

<link rel="stylesheet" href="http://ktonanovenkogo.ru/wp-content/themes/SexyButtons/sexybuttons.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://ktonanovenkogo.ru/feed" />

Как поставить кнопку Sexy Buttons на сайт в Joomla

В случае сайта на Joomla вам нужно будет открыть на редактирование файл index.php из папки используемого вами шаблона Joomla: /templates/Папка_с_вашей_темой_оформления. В начале данного файла вы найдете открывающий и закрывающий теги HEAD, между которыми вами и надо будет вставить строку с Html кодом подключения CSS свойств бесплатных кнопок Sexy Buttons:

<link rel="stylesheet" href="http://Ваш_путь_до_папки_SexyButtons/SexyButtons/sexybuttons.css" type="text/css" />

Как поставить кнопку Sexy Buttons на сайт в SMF

В случае форума на SMF вам нужно будет открыть на редактирование файл index.template.php из папки используемой вами темы оформления SMF. Если у вас на форуме SMF используется тема по умолчанию (дефолтная), то путь к папке будет следующий: Themes/default. С помощью встроенного поиска редактора Notepad++ находите, например, это участок кода:

// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
	echo '
	<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?fin11" />
	<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?fin11" media="print" />';

и добавляете между этими двумя строками свою строку кода для подгрузки файла sexybuttons.css, который сделает кнопки Sexy Buttons красивыми и сексуалными (ну, во всяком случае, разработчики именно так считают):

// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
	echo '
	<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?fin11" />
<link rel="stylesheet" href="http://ktonanovenkogo.ru/wp-content/themes/SexyButtons/sexybuttons.css" type="text/css" />
	<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?fin11" media="print" />';

Все, можно считать, что выполнили задачу — добавить красивые кнопки Sexy Buttons на сайт. Ничего сложно, правда?

Как сделать кнопку для сайта бесплатно

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

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

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

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

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

Создание различных красивых кнопок для сайта

Для того, чтобы кнопка для сайта выглядела более эффектно в конструкторе SexyButtons предусмотрена возможность добавления иконки (изображения 16 на 16 пикселей) до или после надписи на добавляемой кнопке. Для создания красивой кнопки нужно будет добавить еще один открывающий и закрывающий Html тег SPAN, причем, в нем нужно будет прописать CSS класс, соответствующий определенной иконке, которая появится на нашей сексуальной кнопке (чего их авторы так назвали, ума не приложу — да, кнопки, безусловно, красивые, но сексуальность с кнопками у меня не очень стыкуется). Например:

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

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

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

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

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

.sexybutton span.ok				{ background-image: url(images/icons/silk/tick.png) !important; }
.sexybutton span.cancel			{ background-image: url(images/icons/silk/cross.png) !important; }
.sexybutton span.add				{ background-image: url(images/icons/silk/add.png) !important; }
.sexybutton span.delete			{ background-image: url(images/icons/silk/delete.png) !important; }
.sexybutton span.download		{ background-image: url(images/icons/silk/arrow_down.png) !important; }
.sexybutton span.download2		{ background-image: url(images/icons/silk/package_down.png) !important; }
.sexybutton span.upload			{ background-image: url(images/icons/silk/arrow_up.png) !important; }

Создание кнопок для сайта и добавление на них красивых иконок

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

.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, можно воспользоваться альтернативным способом. В этом случае, вместо третьего Html тега SPAN используется Html тег IMG с прописанным адресом (URL) нужной иконки , который прописывается внутри двух Html тегов SPAN до или после надписи на кнопке. Например, красивая кнопка для сайта, ведущая на предыдущую страницу можете выглядеть так:

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

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

<button class="sexybutton"><span><span><img class="after" src="http://ktonanovenkogo.ru/wp-content/themes/SexyButtons/images/icons/silk/resultset_next.png" alt="" />Вперед</span></span></button>

Как сделать кнопку для сайта с разными размерами шрифта

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

<a class="sexybutton" href="#"><span><span>Кнопка для сайта с обычным шрифтом</span></span></a>

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

<a class="sexybutton sexymedium" href="#"><span><span>Кнопка для сайта со средним шрифтом</span></span></a>

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

<a class="sexybutton sexylarge" href="#"><span><span>Кнопка для сайта с большим шрифтом</span></span>

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

Создание разноцветных кнопок для сайта

В конструкторе Sexy Buttons предусмотрены две дополнительные цветовые схемы кнопок для сайта— оранжевая и желтая. Для их применения, точно так же как и при изменении размера шрифта, вам нужно будет дописать через пробел в коде кнопки к 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. В результате получим, например, такие красивые и разноцветные кнопки для сайта:

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

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

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

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

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

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

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

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

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

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

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

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Вы так же можете ознакомиться с другими статьями:

• Полезные программы
  • FileZilla - лучший FTP клиент
  • Яндекс Бар
  • Firebug
  • Web Developer - в помощью начинающему верстальщику
  • SEObar для Opera
  • Красивые кнопки для сайта
  • Notepad++ – Html и PHP редактор
  • Site Auditor — seo анализ сайта и проверка позиций
  • Скорость загрузки сайта - Page Speed
  • Клавиатурный тренажер VerseQ - как научиться быстро печатать

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

• FileZilla (FTP клиент) — что такое FTP, где бесплатно скачать программу Filezilla Client, настройка, как пользоваться ФТП менеджером Файлзила
• Где бесплатно создать логотип и как сжать картинки для сайта, поисковая оптимизация изображений
• Firebug — где скачать Firebug, как установить и как пользоваться бесплатным плагином для Firefox
• Site-Auditor — где скачать и как проверить (определить) позиции сайта в поисковиках (поисковых системах Яндекс и др), SEO анализ и проверка позиций в Сайт-Аудитор
• Фон для сайта — скачать бесплатно в Bgpatterns и Ava7Patterns, сервисы для определения скорости загрузки сайта (Site-Perf и Pingdom)
• Фавикон для сайта: как сделать Favicon ico нужного размера, создать фавикон в online generator или скачать коллекцию Favicon ico из галереи, как установить фавикон в Joomla и WordPress
• PhpMyAdmin — где скачать, установка, настройка и использование