ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Красивые 3D кнопки для сайта на CSS3

Красивые 3D кнопки для сайта на CSS3

С появлением новых функций как CSS3 теперь нам не нужны изображение, для того чтоб вывести любое оформление теперь на это место пришли стили. Что для вас большой плюс, вы можете украсить свой сайт и вывести те кнопки, которые вам нравятся.Здесь узнает как можно сделать привлекательные по визуализации кнопки в 3D, где нам не нужно будет привлекать не одно фоновое изображение.В самих стили все очень популярно прописано, что отвечает за что, и вы можете уже сами редактировать как вам нужно и подгонять под свои нужды.

Установка:

Тут нужно понимать, что Html-код для всех кнопок будет смотреться так.

Для самых мелких:

Для небольших:

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

Теперь остается для самых больших по размеру:

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;
}

И для наглядности, чтоб посмотреть как все будет выглядеть в реале или на вашем портале, предлагается демонстрация для этого.

Источник: Dbmast.ru

28 Мая 2016 Просмотров: 2686 Комментариев: (4)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 4
Порядок вывода комментариев: tsakonter 28 Мая 2016 22:03¹ 0 Кнопки в формате 3D всегда привлекали, и сколько на их стилей уже не написано. FeStemBer 29 Мая 2016 10:12² 0 Очень достойно смотрятся эти кнопки и по установке они очень легко установить можно. ucozmental 29 Мая 2016 12:41³ 0 Одного понять не могу, для чего группу делать, это большие и стандартные, можно как то все на одном стили все вывести, и кому какие, веб мастер сделает по своему дизайн. А так они понравились, просто все в норме, не так сильно показывают 3D но он замечен, чем на других, что выпирает, и для чего так делать. Scheme 29 Мая 2016 18:08⁴ 0 Здесь просто представлены, самые ходовые размеры, если учитывая стандартные шаблоны, все равно по ним как не крути ориентируются.