Sexy Buttons — конструктор (фреймворк) красивых кнопок для вашего сайта
Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. В эфире очередная статья из рубрики Инструменты вебмастера. Сегодня у нас на очереди замечательный инструмент для быстрого добавления на страницы своего сайта красивых кнопок (как считает автор - сексуальных, но тут, конечно же, кому как и что кажется сексуальным) различного назначения. Вставляя кнопку в нужное место сайта мы сами сможем задавать, что на ней будет написано, как она будет выглядеть, какая иконка на ней будет отображаться и многое другое. Причем все это задается и настраивается очень быстро и просто.
Возможности конструктора кнопок для сайта Sexy Buttons
Автор сайта предлагает вам заменить скучные кнопки, используемые на большинстве сайтов, на их оригинальные аналоги, выглядящие значительно более привлекательно.
Если вы недостаточно хорошо разбираетесь в CSS и PhotoShop для того, чтобы создавать красивые и разноплановые кнопки для вашего сайта, то предложенный автором сайта набор уже готовых к использованию кнопок, придется очень даже кстати. Набор кнопок очень велик и способен перекрыть потребности практически любого вебмастера. Вот пример кнопок, созданных при помощи набора Sexy Buttons :
Надписи на кнопках вы задаете сами, а рисунки, стоящие до и после надписей на кнопке, можно выбрать из набора, идущего в комплекте с Sexy Buttons (около полутора тысяч рисунков). Получается что-то вроде конструктора для сборки, а не уже готовые кнопки с надписями, нарисованные в Фотошопе или же созданные на рассмотренном нами ранее сервисе Da Button Factory (Da Button Factory — сервис для создания и тонкой настройки красивых кнопок для вашего сайта).
Какая именно надпись и рисунок будут на кнопке, вы сможете задавать в строке кода, которую нужно будет прописать в нужном месте шаблона вашего сайта для отображения кнопки в нужном месте страницы сайта. Т.е. кнопка для вашего сайта получается составная: контур кнопки (изменяющийся при наведении мыши), надпись на кнопке (задаете сами) и рисунок(выбираемый из полутора тысяч вариантов), который может быть расположен до или после надписи.
Установка конструктора (фреймворка) кнопок Sexy Buttons на ваш сайт
Если вы решили испробовать данный конструктор кнопок на своем сайте, то для начала вам нужно будет скачать Sexy Buttons с сайта автора. скачайте последнюю версию Sexy Buttons (на данный момент это SexyButtons v1.1). Скачали? Теперь распакуйте архив SexyButtons_v1.1.zip и посмотрите, что находится внутри. Папка IMAGES содержит две подпапки: ICONS и SKINS. В папке ICONS лежит папка SILK, в которой содержатся изображения размером 16 на 16 пикселей.
Именно эти изображения будут добавляться на создаваемые вами кнопки до или после надписи. Изображений этих много, около полутора тысяч. Что бы не загружать все изображения на сервер, вы можете предварительно просмотреть эти изображения и оставить только те, которые будете использовать в дальнейшем (хотя можно, конечно же, оставить все как есть).
Теперь вам нужно подключиться к серверу вашего хостинга по протоколу FTP и скопировать на сервер всю папку SexyButtons (можно не копировать файлы changelog.txt и index.html). В какое именно место на сервере вы скопируете эту папку не так важно. Я, например, для этого блога (KtoNaNovenkogo.ru) разместил эту папку по следующему адресу: wp-content/themes/SexyButtons. Копирование займет какое-то время, особенно если вы оставили все файлы изображений в папке SexyButtons\images\skins\, не удалив те, которые не планируете использовать в дальнейшем для оформления внешнего вида кнопок на своем сайте.
Настраиваем подгрузку файла таблиц каскадных стилей sexybuttons.css вместе со страницами вашего сайта на Joomla, блога на WordPress и форума на SMF
Следующим шагом после окончания копирования содержимого папки SexyButtons на сервер, будет прописывание в код шаблона вашего сайта строки, предписывающей браузерам при загрузке любых страниц вашего сайт вместе с HTML кодом подгружать еще и файл каскадных таблиц стилей sexybuttons.css. В этом случае все кнопки, созданные вами с помощью Sexy Buttons будут правильно отображаться на всех страницах вашего сайта. Прописать эту строчку кода, призванную подгружать файл стилей кнопок sexybuttons.css, нужно между открывающим и закрывающим тегами HEAD в шаблоне вашего сайта.
Теги HEAD всегда находятся в самом верху любой HTML странички и между ними прописываются различные мета-теги, которые призваны сообщать определенную информацию браузерам, в которых открывается данная страница, и поисковым системам. Нам нужно будет прописать между открывающим и закрывающим тегами HEAD следующую строку кода:
<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 на путь до файла sexybuttons.css, который для вашего сайта целиком и полностью будет зависеть от того, куда вы скопировали папку SexyButtons на первом шаге установки конструктора Sexy Buttons.
Подключение файла таблиц каскадных стилей sexybuttons.css для блога на Wordpress
В случае блога на Wordpress для вставки данной строки кода вам нужно будет открыть на редактирование файл header.php из папки с используемой вами темой оформления: wp-content/themes/Папка_с_вашей_темой_оформления. Открываете файл header.php в редакторе (например, Notpad++) и в самом его начале находите открывающий тег HEAD, который в моем случае выглядит так:
<head profile="http://gmpg.org/xfn/11">
В любом месте за ним, но до закрывающего тега HEAD:
</head>
прописываете строчку с кодом, например так:
<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" />
Подключение файла таблиц каскадных стилей sexybuttons.css для сайта на Joomla
В случае сайта на Joomla вам нужно будет открыть на редактирование файл index.php из папки используемой вами темы оформления: /templates/Папка_с_вашей_темой_оформления. В начале данного файла вы найдете открывающий и закрывающий теги HEAD, между которыми вами и надо будет вставить строку с кодом:
<link rel="stylesheet" href="http://Ваш_путь_до_папки_SexyButtons/SexyButtons/sexybuttons.css" type="text/css" />
Подключение файла таблиц каскадных стилей sexybuttons.css для форума на SMF
В случае форума на SMF вам нужно будет открыть на редактирование файл index.template.php из папки используемой вами темы оформления. Если у вас на форуме используется тема по умолчанию (дефолтная), то путь к папке будет следующий: 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:
// 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 по созданию разнообразных кнопок для вашего сайта
Теперь переходим к самой интересной части - созданию кнопок на своем сайте с помощью конструктора Sexy Buttons.
Создание простой кнопки с надписью, но без иконки с помощью конструктора SexyButtons
Для создания самой обычной кнопки с надписью, но без рисунка, вы можете использовать либо тег ссылок A, либо тег для создания кнопки BUTTON. При этом пространство между открывающими и закрывающими тегами (A или BUTTON) должно быть заполнено текстом, который вы хотите видеть на создаваемой кнопке. Причем, этот текст должен быть заключен в двойные открывающие и закрывающие теги SPAN. Звучит устрашающе, не правда ли? Но на деле, все довольно просто. В случае тега A мы используем такой код:
<a class="sexybutton" href="#"><span><span>Простая кнопка</span></span></a>
и получаем такую кнопку:
Простая кнопка
Причем, это реально рабочая кнопка. Нажав на нее вы попадете в начало страницы. Это задается атрибутом HREF тега A. Там прописан переход к началу страницы "#".
В случае с тегом BUTTON, код и получаемая кнопка будут выглядеть так:
<button class="sexybutton"><span><span>Другая простая кнопка</span></span></button>
Создание кнопок с надписью и иконкой при помощи конструктора SexyButtons
Для того, чтобы кнопка выглядела более эффектно в конструкторе SexyButtons предусмотрена возможность добавления иконки (изображения 16 на 16 пикселей) до или после надписи на кнопке. Для создания такой кнопки нужно будет добавить еще один открывающий и закрывающий тег SPAN, причем, в нем нужно будет прописать класс, соответствующий определенной иконке, которая появится на кнопке. Например:
<button class="sexybutton"><span><span><span class="ok">KtoNaNovenkogo.ru</span></span></span></button>
Видите, у кнопки перед надписью появилась галочка, которая соответствует классу OK, прописанному во внутреннем теге SPAN. А как сделать так, чтобы иконка была на кнопке не перед надписью, а после нее. Довольно просто. Нужно добавить через пробел к названию класса, прописываемого в теге SPAN, слово AFTER. Например:
<button class="sexybutton"><span><span><span class="ok after">KtoNaNovenkogo.ru</span></span></span></button>
Но встает вопрос, а откуда взять название класса, с помощью которого можно будет отобразить на создаваемой кнопке нужную вам иконку. Сразу оговорюсь, что все полторы тысячи иконок вы не сможете использовать с помощью заранее прописанных автором классов. Автор прописал только базовые иконки и соответствующие им классы. Все это вы сможете посмотреть, открыв файл sexybuttons.css в редакторе Notepad++. В самом низу этого файла вы увидите группу свойств, описывающих соответствие названия класса и иконки (прописан путь до файла иконки), которая будет выводиться на кнопке при использовании данного класса. Вот начало этой группы свойств:
.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; }
Добавление иконок не входящих в основной набор на создаваемые кнопки , путем прописывания новых свойств в файле 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">KtoNaNovenkogo.ru</span></span></span></button>
Альтернативный способ добавления иконок не входящих в основной набор на создаваемые кнопки
Кроме описанного выше способа добавления на создаваемые кнопки иконок, не описанных в файле sexybuttons.css, можно воспользоваться альтернативным способом. В этом случае, вместо третьего тега SPAN используется тег IMG с прописанным адресом нужной иконки , который прописывается внутри двух тегов 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>
Если нужно поместить иконку после надписи, то нужно будет добавить в тег IMG атрибут CLASS="AFTER" и прописать сам тег 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>
Изменение размера шрифта для надписи на кнопке, создаваемой с помощью конструктора SexyButtons
По умолчанию имеется возможность выводить надписи на кнопке трех размеров шрифтов: нормальный, средний и большой. Для использования среднего и большого размера шрифта вам нужно будет дописать через пробел в коде кнопки к классу SEXYBUTTON соответственно классы SEXYMEDIUM и SEXYLARGE. Нормальный шрифт надписи будет выглядеть так:
<a class="sexybutton" href="#"><span><span>KtoNaNovenkogo.ru</span></span></a>
Средний размер шрифта - так:
<a class="sexybutton sexymedium" href="#"><span><span>KtoNaNovenkogo.ru</span></span></a>
Ну и большой размер шрифта надписи на кнопке - так:
<a class="sexybutton sexylarge" href="#"><span><span>KtoNaNovenkogo.ru</span></span>
Изменяем цветовое оформление стандартных кнопок, созданных с помощью конструктора SexyButtons
В конструкторе предусмотрены две дополнительные цветовые схемы для создаваемых кнопок - оранжевая и желтая. Для их применения, точно так же как и при изменении размера шрифта, вам нужно будет дописать через пробел в коде кнопки к классу SEXYBUTTON соответственно классы SEXYORANGE и SEXYYELLOW. Оранжевая кнопка будет формировать и выглядеть соответственно так:
<a class="sexybutton sexyorange" href="#"><span><span>KtoNaNovenkogo.ru</span></span></a>
KtoNaNovenkogo.ru
Желтая кнопка - так:
<a class="sexybutton sexyyellow" href="#"><span><span>KtoNaNovenkogo.ru</span></span></a>
Изменяем цветовое оформление и размер Simple кнопок, созданных с помощью конструктора SexyButtons
Оформление кнопок Simple отличается от оформления стандартных кнопок. Для использования кнопок с оформлением Simple достаточно будет дописать через пробел в коде кнопки к классу SEXYBUTTON, соответственно класс, sexysimple:
<button class="sexybutton sexysimple">KtoNaNovenkogo.ru</button>
Кнопка Simple имеет еще восемь возможных цветов (по умолчанию кнопка будет черной). Цвет варианта Simple можно задать, дописав через пробел к классам SEXYBUTTON SEXYSIMPLE еще и класс, отвечающий за цвет. Имеется возможность использовать один из этих классов: 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>
Замечательный, на мой взгляд, конструктор или же фреймворк.
Вы так же можете ознакомиться с другими статьями из р рубрики Инструменты вебмастера/Нужные программы.
На сегодня все. Если вы не хотите пропустить появление новых материалов на этом сайте, то можете подписаться на рассылку новостной ленты через форму, расположенную чуть ниже, или же выбрать удобный для вас способ подписки на странице Подписка. Если у вас остались нерешенные вопросы из области вебмастеринга, то вы можете поискать на них ответы, посетив страницу Вопросы и ответы.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Спасибо за очень познавательный материал. Все очень понятно описано. Попробую.
А скажите, зачем пользоавтся сервисом, если есть фотошоп и множество уроков по нему, как создать очень красивую кнопку
cava150: каждому свое. Кому-то надо шашечки, а кому-то ехать. Этот способ будет быстрее если с Фотошопом вы совсем не знакомы. Фотошоп серьезная программа, которая требует серьезного подхода к ее изучению. Это мое мнение, а пользоваться данным конструктором или нет – это уже вам решать.
Кнопочки похожи из windows 7 )))
симпатичные!!!
я лично пользуюсь программой Web Button Maker Delux
Это кстати не сервис для создания кнопочек, это готовый стиль оформления. В принципе если выкинуть лишнее, то получаем +10кб к весу страницы, в общем не так уж и много.