Кнопки як в Google+ на CSS3

Кнопки як в Google+ на CSS3

Автор TechDude

Категория: Для веб-майстра

Привіт, друзі! На цей раз я поділюся з вами кнопками зробленими в стилі Google+, для створення кнопок як завжди використовувалися властивості CSS3. Кнопки вийшли симпатичними, вони легко настроюються, і ніби як не сильно й відрізняються від оригінальних гугловських.

Демонстрація Завантажити ісходні коди

Ці кнопки можна використовувати в будь-яких випадках, вони добре підійдуть для сторінок зі світлим інтерфейсом, їх можна використовувати також і в цілях маніпуляції якимись даними, наприклад як в GMail.

Тепер розповім як їх використовувати в своїх проектах. Для угруповання кнопок нам необхідно обрамити їх в один контейнер у якого клас повинен бути «gp-buttons-group», у самих кнопок повинен бути клас «gp-button» (для активної «gp-button-active»), ось так:

<div class="gp-buttons-group">
<a href="#" class="gp-button">Главная</a>
<a href="#" class="gp-button">Новости</a>
<a href="#" class="gp-button">Подписки</a>
<a href="#" class="gp-button">Поиск</a>
</div>

Для кнопок які не повинні входить в групи, просто даєте клас «gp-button-single» і не обрамляєте в контейнер (клас для активної кнопки «gp-button-single-active»):

<a href="#" class="gp-button-single">Кнопка</a>

Ну і звичайно ж кнопки тільки з іконками, їх можна точно також групувати і не групувати. Для того щоб задати кнопці тип «image-button» потрібно привласнити клас «gp-button-icon» і власне клас з іконкою, наприклад для кнопки з іконкою твіттера код буде таким:

<a href="#" class="gp-button gp-button-icon gp-icon-twitter">&nbsp;</a>

І не забувайте в кнопках з іконками вставляти нерозривний пробіл. Кнопки з іконками групуються також як і звичайні, через контейнер з класом «gp-buttons-group». Кнопки з іконками і без можна поєднувати в угрупованнях. Ну ось ніби і все, сподіваюся вам сподобалося. :)

4 Сентябрь 2012

Оставь свой комментарий!

rss
Про блог
TechDude.Blog – персональний блог, который не имеет одной конкретной тематики. Тут вы найдете интересные и полезные статьи про: интернет, гаджети, музику, видео, спорт, искусство, web и социальные сервисы.
Надеемся, что Вам понравиться!
Подпишитесь на обновления блога и получайте свежие новости на свой E-mail. Введите свей e-mail тут:


Флаг
Розмовляй українською!
Якщо вважаеш потрібним зберегти українську мову – просто розмовляй українською. УкрЦентр