Mega Web Buttons — набор красивых кнопок для блога

Mega Web Buttons - набор красивых кнопок для блога | n-wp.ru Настройки

Давно ничего не писал об элементах оформления, которые можно использовать в блоге. Если вам нужен набор красивых кнопок, которые можно использовать в блоге, то обратите внимание на Mega Web Buttons.

Mega Web Buttons - набор красивых кнопок для блога

Это не простой набор картинок, а набор готовых кнопок, с красивыми эффектами постепенной подсветки при наведении курсора. В кнопках можно использовать внедренные шрифты Google. В принципе, весь код можно посмотреть в файле index.html, но я отдельно объясню, как пользоваться.

Для начала нужно подключить все файлы оформления. Для этого вставьте в файл header.php:

</pre>
<p>Для отображения текста кнопок можно подключить шрифты Google:</p>
<pre>

Выбрать шрифты Google можно тут — http://www.google.com/webfonts

Сразу после этого подключите скрипты:

 

Если у вас уже подключена библиотека jQuery, то jquery.js дополнительно еще раз подключать не нужно. После этого можете использовать в любом месте кнопки. Коды кнопок, показанных на скриншоте выше:

<a href="#" class="btn activity">Activity</a>
<a href="#" class="btn activitya">Add activity</a>
<a href="#" class="btn activityd">Delete activity</a>
<a href="#" class="btn activityw">Activity warning</a>
<a href="#" class="btn add">Add</a>
<a href="#" class="btn address">Address book</a>
<a href="#" class="btn addressd">Delete address</a>
<a href="#" class="btn addresss">Search for address</a>
<a href="#" class="btn addressa">Add address</a>
<a href="#" class="btn book">Bookmarks</a>
<a href="#" class="btn booka">Add bookmark</a>
<a href="#" class="btn bookd">Delete bookmark</a>
<a href="#" class="btn books">Search for bookmarks</a>
<a href="#" class="btn bulb">Bulb</a>
<a href="#" class="btn chart">Chart</a>
<a href="#" class="btn comment">Comments</a>
<a href="#" class="btn commenta">Add comment</a>
<a href="#" class="btn commentua">Add user comment</a>
<a href="#" class="btn commentud">Delete user comment</a>
<a href="#" class="btn commentus">Search for user comment</a>
<a href="#" class="btn delete">Delete</a>
<a href="#" class="btn edit">Edit</a>
<a href="#" class="btn email">Message</a>
<a href="#" class="btn emaila">Add message</a>
<a href="#" class="btn emaild">Delete message</a>
<a href="#" class="btn fav">Favourite</a>
<a href="#" class="btn folder">Folder</a>
<a href="#" class="btn foldera">Add folder</a>
<a href="#" class="btn folderd">Delete folder</a>
<a href="#" class="btn info">Info</a>
<a href="#" class="btn lock">Lock</a>
<a href="#" class="btn unlock">Lock open</a>
<a href="#" class="btn page">Document</a>
<a href="#" class="btn pagea">Add document</a>
<a href="#" class="btn paged">Delete document</a>
<a href="#" class="btn rss">RSS</a>
<a href="#" class="btn search">Search</a>
<a href="#" class="btn time">Time</a>
<a href="#" class="btn user">Users</a>
<a href="#" class="btn usera">Add user</a>
<a href="#" class="btn userd">Delete user</a>
<a href="#" class="btn users">Search for user</a>
<a href="#" class="btn useri">More about user</a>
<a href="#" class="btn warn">Warning</a>

Понятно, что названия можете поменять на свои. Значки создала студия WooThemes, они распространяются бесплатно. Код написал Marcin Dziewulski.

Демо Mega Web Buttons Скачать Mega Web Buttons Скачать Mega Web Buttons (зеркало)

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. Grawl

    Клёвые.

    Ответить