вход

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

Кнопки в стиле 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 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Один комментарий :

Статья → Кнопки в стиле Facebook при помощи CSS3

  1. довольно приятные кнопочки. только вот использовать наверное придется на тематических ресурсах про социалки…

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

Статья → Кнопки в стиле Facebook при помощи CSS3

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.