Кнопки в стиле Facebook при помощи CSS3


Здравствуйте уважаемые читатели блога mainview.ru. Как вы уже знаете, CSS позволяет достаточно гибко применять стили к элементам, заставляя их выглядеть подобно графическому изображению. Назначив правила, можно добиться довольно качественной стилизации. Сегодня, я хотел бы показать вам, как можно добиться стилизации кнопок под такую популярную сеть как Facebook. Используя код, приведённый ниже, вы можете создавать кнопки в стиле Facebook.

Кнопки в стиле Facebook при помощи CSS3

Самый простой способ заставить людей думать: "Вау, это приложение должно быть так же хорошо, как Facebook!"

Кнопки

Для того, чтобы создать "основную" кнопку просто доббавьте класс uibuttonк соответствующему элементу. Для того, чтобы создать синий вариант добавьте дополнительный класс confirm. Для того, чтобы создать зелёный вариант добавьте дополнительный класс special.

<a class="uibutton" href="#button">Изменить изображение</a>
<button class="uibutton confirm" type="submit">Войти</button>
<input class="uibutton confirm" type="submit" value="Опубликовать">
<input class="uibutton" type="submit" value="Сохранить как черновик">
<a class="uibutton special" href="#button">Послать приглашение</a>

Изменить изображение

Послать приглашение

Большие кнопки

Для того, чтобы создать большие кнопки, добавьте дополнительный класс large.

<a class="uibutton large" href="#button">Поиск</a>
<a class="uibutton large confirm" href="#button">Поделиться</a>
<a class="uibutton large special" href="#button">Послать приглашение</a>

Поиск

Поделиться

Послать приглашение

Группа кнопок

Для того, чтобы создать группу кнопок, поместите их в общий элемент, или используйте список, и назначьте корневому элементу класс uibutton-group.

<div class="uibutton-group">
	<ul>
	<li><a href="#button" class="uibutton">Панель</a></li>
<li><a href="#button" class="uibutton">Входящие</a></li>
<li><a href="#button" class="uibutton">Профиль</a></li>
<li><a href="#button" class="uibutton">Выйти</a></li>
	</ul>
</div>

  • Панель
  • Входящие
  • Профиль
  • Выйти

Кнопки с иконками

На кнопки можно также добавить необходимые иконки, для этого просто добавьте дополнительный класс icon. После этого останеться только назначить соответствующую иконку на соответствующий класс. Здесь очень удобно использовать технологию спрайтов, т.е. хранить все значки в одном файле, а классами только позиционировать нужный.

<a class="uibutton icon add" href="#button">Новое сообщение</a>

Новое сообщение

Для такой кнопки достаточно определить нужный нам класс:

.uibutton.icon:before {
content: "";
position: relative; 
top: 1px; 
float:left;
width: 10px; 
height: 12px; 
margin: 0 0.5em 0 0; 
background: url(icons.png) 99px 99px no-repeat;
}

.uibutton.add:before { 
background-position: -10px 0; 
}

Вот некоторые примеры таких кнопок:

КлассПример
.editРедактировать статью
.addДобавить фото
.secureЛичные данные
.prevНазад к сообщению
.nextЧитать далее

Совместимость с браузерами

Полная проддержка: Firefox 3.5+, Google Chrome, Safari 4+, IE 9+, Opera 11.10+.

Примечание:Некоторые правила CSS3 не поддерживаются старыми версиями Opera и IE. Кнопки с иконками также не поддерживаются ни в IE 6 ни в IE 7.

Исходный код для кнопок в стиле Facebook

/* ------------------------------------------
Кнопки в стиле Facebook при помощи CSS3
Автор : Nicolas Gallagher
Licensed under Unlicense
http://github.com/necolas/css3-facebook-buttons
------------------------------------------ */


/* КНОПКА */

.uibutton { 
position: relative; 
z-index: 1;
overflow: visible; 
display: inline-block; 
padding: 0.3em 0.6em 0.375em; 
border: 1px solid #999; 
border-bottom-color: #888;
margin: 0;
text-decoration: none; 
text-align: center;
font: bold 11px/normal 'lucida grande', tahoma, verdana, arial, sans-serif; 
white-space: nowrap; 
cursor: pointer; 
color: #333; 
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
background-image: -moz-linear-gradient(#f5f6f6, #e4e4e3);
background-image: -o-linear-gradient(#f5f6f6, #e4e4e3);
background-image: linear-gradient(#f5f6f6, #e4e4e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6', EndColorStr='#e4e4e3'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff;
/* хак для IE */
zoom: 1; 
*display: inline; 
}

.uibutton:hover,
.uibutton:focus,
.uibutton:active {
border-color: #777 #777 #666;
}

.uibutton:active {
border-color: #aaa;
background: #ddd;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

/* хак для Firefox */
.uibutton::-moz-focus-inner {
padding: 0;
border: 0;
}

/* ИКОНКИ */

.uibutton.icon:before {
content: "";
position: relative; 
top: 1px; 
float:left;
width: 10px; 
height: 12px; 
margin: 0 0.5em 0 0; 
background: url(fb-icons.png) 99px 99px no-repeat;
}

.uibutton.edit:before { background-position: 0 0; }
.uibutton.add:before { background-position: -10px 0; }
.uibutton.secure:before { background-position: -20px 0; }
.uibutton.prev:before { background-position: -30px 0; }
.uibutton.next:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: -40px 0; }

/* РАСШИРЕНИЯ ДЛЯ КНОПКИ */


.uibutton.large {
font-size:13px;
}

.uibutton.confirm {
border-color: #29447E #29447E #1A356E;
color: #fff;
background-color: #5B74A8;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#637bad), to(#5872a7));
background-image: -moz-linear-gradient(#637bad, #5872a7);
background-image: -o-linear-gradient(#637bad, #5872a7);
background-image: linear-gradient(#637bad, #5872a7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#637bad', EndColorStr='#5872a7'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #8a9cc2;
}

.uibutton.confirm:active {
border-color: #29447E;
background: #4F6AA3;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.uibutton.special {
border-color: #3b6e22 #3b6e22 #2c5115;
color: #fff;
background-color: #69A74E;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#75ae5c), to(#67a54b));
background-image: -moz-linear-gradient(#75ae5c, #67a54b);
background-image: -o-linear-gradient(#75ae5c, #67a54b);
background-image: linear-gradient(#75ae5c, #67a54b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#75ae5c', EndColorStr='#67a54b'); /* for IE 6 - 9 */
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
}

.uibutton.special:active {
border-color: #3B6E22;
background: #609946;
filter: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}


/* ГРУППА КНОПОК */

.uibutton-group {
display: inline-block;
list-style: none;
padding: 0;
margin: 0;
/* хак для IE */
zoom: 1; 
*display: inline; 
}

.uibutton + .uibutton,
.uibutton + .uibutton-group,
.uibutton-group + .uibutton,
.uibutton-group + .uibutton-group {
margin-left: 3px;
}

.uibutton-group li {
float: left;
padding: 0;
margin: 0;
}

.uibutton-group .uibutton {
float: left;
margin-left: -1px; 
}

.uibutton-group .uibutton:hover,
.uibutton-group .uibutton:focus,
.uibutton-group .uibutton:active {
z-index:2;
}

.uibutton-group > .uibutton:first-child,
.uibutton-group li:first-child .uibutton { 
margin-left: 0; 
}

/* КОНТЕЙНЕР ДЛЯ КНОПОК */

.uibutton-toolbar {
padding: 6px;
border-top: 1px solid #ccc;
background: #f2f2f2;
}

.uibutton-toolbar .uibutton,
.uibutton-toolbar .uibutton-group {
vertical-align: bottom;
}

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

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

Один отзыв

  1. Руслан22/04/2011

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

17 + восемь =