Главная » HTML & CSS » Привлекательные 3D кнопки с помощью CSS3

Привлекательные 3D кнопки с помощью CSS3

Благодаря новым функциям стало возможным отказаться от использования изображений при оформлении элементов интерфейса сайта, на смену картинкам приходит чистый код CSS. Так например, всё чаще поступают при формировании кнопок, используемых на сайте.
Однажды я уже рассказывал, как пользуясь исключительно средствами CSS3, можно «нарисовать» красивую кнопку в стиле 3d.
Сегодня, предлагаю очередной набор правил CSS3, для формирования привлекательных кнопок в стиле 3D, без использования дополнительных фоновых изображений. Весь код CSS разбит так, чтобы стили можно было использовать, как в общем массиве, так и для каждой отдельно.
 
Привлекательные 3D кнопки

HTML

Html-код для всех кнопок будет выглядеть так:

Для микро-кнопок:

<button type="button" class="btn btn-hot btn-xs">Кнопка 1</button>
<button type="button" class="btn btn-sunny btn-xs">Кнопка 2</button>
<button type="button" class="btn btn-fresh btn-xs">Кнопка 3</button>
<button type="button" class="btn btn-sky btn-xs">Кнопка 4</button>

Для маленьких:

<button type="button" class="btn btn-hot btn-sm">Кнопка 1</button>
<button type="button" class="btn btn-sunny btn-sm">Кнопка 2</button>
<button type="button" class="btn btn-fresh btn-sm">Кнопка 3</button>
<button type="button" class="btn btn-sky btn-sm">Кнопка 4</button>

Для стандартных:

<button type="button" class="btn btn-hot btn-md">Кнопка 1</button>
<button type="button" class="btn btn-sunny btn-md">Кнопка 2</button>
<button type="button" class="btn btn-fresh btn-md">Кнопка 3</button>
<button type="button" class="btn btn-sky btn-md">Кнопка 4</button>

Для кнопок большого размера:

<button type="button" class="btn btn-hot btn-lg">Кнопка 1</button>
<button type="button" class="btn btn-sunny btn-lg">Кнопка 2</button>
<button type="button" class="btn btn-fresh btn-lg">Кнопка 3</button>
<button type="button" class="btn btn-sky btn-lg">Кнопка 4</button>

Как видите в конструкции кнопок задействован тег <button> с прописанными определёнными классами, определяющими непосредственно в css все необходимые параметры кнопок, т.е. базовые стили: btn, цвет кнопки: btn-hot btn-sunny btn-sunny и btn-sky соответственно, а так же размер: btn-xs для самых маленьких кнопок, btn-sm выводит кнопки побольше, стандартным кнопкам соответствует класс btn-md, и чтобы вывести совсем большие кнопки, достаточно добавить btn-lg.
Класс btn общий для всех кнопок и отвечает за базовые стили, вам остаётся выбрать нужный вам цвет и размер кнопки, и в теге <button> прописать соответствующие классы.

CSS3

Расписывать отдельно все свойства и значения не буду, для общего понимания, непосредственно в коде css, прописал некоторые комментарии, так что думаю разобраться будет не трудно.

/* Базовые стили кнопок */
.btn {    
display: inline-block;
margin: 4px;
box-shadow: 1px 1px 5px #888888;    
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
/* Мини кнопки */
.btn-xs{
border-radius: 3px;
font-size: 12px;
padding: 1px 5px;
line-height: 1.5;
}
 /* Маленькие кнопки */         
.btn-sm{
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
text-transform: uppercase;
}
/* Стандартные кноки */
.btn-md{
 text-transform: uppercase;
}
/* Большие кнопки */          
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
text-transform: uppercase;    
}
 /* Красный оттенок кнопок */         
.btn-hot {
color: #fff;
background-color: #db5566;
border-bottom:2px solid #af4451;
}
/* Красная кнопка при наведении */
.btn-hot:hover, .btn-hot:focus {
color: #fff;
background-color: #df6a78;
border-bottom:2px solid #b25560;
outline: none;
}
/* Красная кнопка при нажатии */
.btn-hot:active {
color: #fff;
background-color: #c04b59;
border-top:2px solid #9a3c47;
margin-top: 2px;
}
/* Желтый оттенок кнопок */
.btn-sunny {
color: #fff;
background-color: #f4ad49;
border-bottom:2px solid #c38a3a;
}
/* Желтая кнопка при наведении */
.btn-sunny:hover, .btn-sunny:focus {
color: #fff;
background-color: #f5b75f;
border-bottom:2px solid #c4924c;
outline: none;
}
/* Желтая кнопка при наведении */
.btn-sunny:active {
color: #fff;
background-color: #d69840;
border-top:2px solid #ab7a33;
margin-top: 2px;
}
/* Зелёный оттенок кнопок */
.btn-fresh {
color: #fff;
background-color: #51bf87;
border-bottom:2px solid #41996c;
}
/* Зелёная кнопка при наведении */
.btn-fresh:hover, .btn-fresh:focus {
color: #fff;
background-color: #66c796;
border-bottom:2px solid #529f78;
outline: none;
}
/* Зелёная кнопка при нажатии */
.btn-fresh:active {
color: #fff;
background-color: #47a877;
border-top:2px solid #39865f;
outline: none;
outline-offset: none;
margin-top: 2px;
}
/* Синий оттенок кнопок */
.btn-sky {
color: #fff;
background-color: #0bacd3;
border-bottom:2px solid #098aa9;
}
/* Синяя кнопка при наведении */
.btn-sky:hover, .btn-sky:focus {
color: #fff;
background-color: #29b6d8;
border-bottom:2px solid #2192ad;
outline: none;
}
/* Синяя кнопка при нажатии */
.btn-sky:active {
color: #fff;
background-color: #0a97b9;
border-top:2px solid #087994;
outline-offset: none;
margin-top: 2px;
}
/* Убираем рамку при фокусе на кнопках */
.btn:focus,
.btn:active:focus {
outline: none;
outline-offset: 0px;
}

На отдельной странице, вы ещё раз можете посмотреть живой пример всех вариантов 3d-кнопки, если понравятся и вы их захотите использовать, то просто скачайте исходники в архиве с моего Яндекс.Диска:

Корректно кнопки отображаются во всех современных браузерах Opera, Firefox, Chrome, Safari и Internet Explorer 9+, в IE8 отсутствуют закругления углов, но это не особо критично. Исходя из этого можно сделать вывод, что такие 3D-кнопки, сформированные с помощью CSS3, можно и даже нужно использовать на своих веб-проектах.

Набор правил и свойств CSS основан на стилях отдельных элементов популярного css-фреймворка Twitter Bootstrap и могут использованы без подключения этой библиотеки инструментов для создания сайтов.

С Уважением, Андрей .

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

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

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru