• Главная
  • WEB студия
    • Услуги и Цены
    • Домены
    • Хостинг и Почта
    • Сайт-Визитка
    • Интернет-магазин
    • Поддержка сайта
    • Портфолио
  • Продвижение сайта
    • Контекстная реклама
    • Семантическое ядро
    • SEO продвижение сайта
  • Социальные сети
    • SMO/SMM-продвижение
    • Создание и ведение групп
    • Автопостинг новостей
  • Парсинг сайтов
    • Зачем нужен парсинг?
    • Зачем нужен парсинг?
    • Анализ цен конкурентов
  • Журнал о Web
    • Поисковые системы
    • Все о SEO
    • Все о SMM
    • jQuery скрипты
    • Малый бизнес
  • Справочники
    • HTML
    • CSS
    • PHP
    • MySQL
    • jQuery
  • Информация
    • Кто МЫ!?
    • Контакты
    • Оплата услуг
    • Спасибо Вам
  • Инструменты
  • SEOker
  • SIZEr
  • HTML редактор
  • Наши проекты
  • W1CMS.ru
  • DiiF.ru
  • MinURL.ru

Красивые Кнопки с помощью CSS3

Замечательная технология CSS3 позволяет в ряде случаев при оформлении сайта отказаться от использования изображений, которые заменяет чистый CSS-код. К примеру, подобным образом можно поступить с какими-либо кнопками, используемыми на сайте.

  1. Главная
  2. Все про CSS

Замечательная технология CSS3 позволяет в ряде случаев при оформлении сайта отказаться от использования изображений, которые заменяет чистый CSS-код. К примеру, подобным образом можно поступить с какими-либо кнопками, используемыми на сайте.

HTML-код кнопки будет таким:

<button name="" type="submit">Отправить</button>

Можно было бы использовать и тег input, но есть 2 причины, по которым в данном случае лучше будет задействовать тег button:

  1. В Опере на input’е не работает свойство text-shadow;
  2. В Опере у input-кнопки появляется черная обводка, если есть фокус в одном из полей формы, что делает кнопку некрасивой.

Особенности

Каждая кнопка имеет 3 состояния: по умолчанию, при наведении курсора мыши и при клике.

Полноценно (т.е. так, как и задумывалось) кнопки отображаются в браузерах Opera, Firefox, Chrome, Safari. В Internet Explorer 9 отсутствуют закругления углов, внутренняя обводка и тень у текста (поскольку эти свойства он не поддерживает). Несмотря на это, в IE9 кнопки выглядят неплохо. В IE8 и версиях ниже также отсутствует объемность кнопки, но в них, по крайней мере, есть градиенты.

И так, css коды кнопок, разбиты по цветам:

<strong>.silver {
    width: 120px;
    height: 32px;
    padding: 0 0 2px;
    font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
    outline: none;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    color: #555;
    border: 1px solid #BBB;
    border-top: 1px solid #D0D0D0;
    border-bottom: 1px solid #A5A5A5;
    text-shadow: 1px 1px #FAFAFA;
    box-shadow:
        inset 0 1px #F5F5F5,
        inset 1px 0 #EDEDED,
        inset -1px 0 #EDEDED,
        inset 0 -1px #E7E7E7,
        0 2px #B2B1B1,
        0 3px #A5A5A5,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #eeeeee 0%, #e2e2e2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#e2e2e2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #eeeeee 0%,#e2e2e2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #eeeeee 0%,#e2e2e2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #eeeeee 0%,#e2e2e2 100%); /* IE10+ */
    background: linear-gradient(top,  #eeeeee 0%,#e2e2e2 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */
    background-color: #E8E8E8;
}
.silver::-moz-focus-inner{border:0}
.silver:hover {
    border-top: 1px solid #C2C2C2;
    box-shadow:
        inset 0 1px #EFEFEF,
        inset 1px 0 #EDEDED,
        inset -1px 0 #EDEDED,
        inset 0 -1px #EDEDED,
        0 2px #B2B1B1,
        0 3px #A5A5A5,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #e4e4e4 0%, #e9e9e9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4e4e4), color-stop(100%,#e9e9e9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e4e4e4 0%,#e9e9e9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e4e4e4 0%,#e9e9e9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e4e4e4 0%,#e9e9e9 100%); /* IE10+ */
    background: linear-gradient(top,  #e4e4e4 0%,#e9e9e9 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#e9e9e9',GradientType=0 ); /* IE6-9 */
    background-color: #E8E8E8;
}
.silver:active {
    top: 3px;
    border: 1px solid #B9B9B9;
    border-top: 1px solid #959595;
    border-bottom: 1px solid #CACACA;
    background: #E3E3E3;
    box-shadow: inset 0 1px 2px #B9B9B9;
}
.black {
    width: 120px;
    height: 32px;
    padding: 0 0 2px;
    font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
    outline: none;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    color: #FFF;
    border: 1px solid #434343;
    border-top: 1px solid #535353;
    border-bottom: 1px solid #353535;
    text-shadow: 1px 1px #2F2F2F;
    box-shadow:
        inset 0 1px #939393,
        inset 1px 0 #707070,
        inset -1px 0 #707070,
        inset 0 -1px #5A5A5A,
        0 2px #414141,
        0 3px #343434,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #656565 0%, #444444 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#656565), color-stop(100%,#444444)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #656565 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #656565 0%,#444444 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #656565 0%,#444444 100%); /* IE10+ */
    background: linear-gradient(top,  #656565 0%,#444444 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#444444',GradientType=0 ); /* IE6-9 */
    background-color: #464646;
}
.black::-moz-focus-inner{border:0}
.black:hover {
    border-top: 1px solid #464646;
    box-shadow:
        inset 0 1px #818181,
        inset 1px 0 #707070,
        inset -1px 0 #707070,
        inset 0 -1px #6B6B6B,
        0 2px #414141,
        0 3px #343434,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #656565 0%, #565656 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#656565), color-stop(100%,#565656)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #656565 0%,#565656 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #656565 0%,#565656 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #656565 0%,#565656 100%); /* IE10+ */
    background: linear-gradient(top,  #656565 0%,#565656 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#656565', endColorstr='#565656',GradientType=0 ); /* IE6-9 */
    background-color: #464646;
}
.black:active {
    top: 3px;
    border: 1px solid #3A3A3A;
    border-top: 1px solid #2F2F2F;
    border-bottom: 1px solid #404040;
    background: #484848;
    box-shadow: inset 0 1px 2px #252525;
}
.pink {
    width: 120px;
    height: 32px;
    padding: 0 0 2px;
    font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
    outline: none;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    color: #913944;
    border: 1px solid #D16573;
    border-top: 1px solid #EE8090;
    border-bottom: 1px solid #B84D5A;
    text-shadow: 1px 1px #F9A0AD;
    box-shadow:
        inset 0 1px #FBC1D0,
        inset 1px 0 #F99AAB,
        inset -1px 0 #F99AAB,
        inset 0 -1px #F68391,
        0 2px #CB5462,
        0 3px #B84D5A,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #f997b0 0%, #f56778 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f997b0), color-stop(100%,#f56778)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f997b0 0%,#f56778 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f997b0 0%,#f56778 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f997b0 0%,#f56778 100%); /* IE10+ */
    background: linear-gradient(top,  #f997b0 0%,#f56778 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f997b0', endColorstr='#f56778',GradientType=0 ); /* IE6-9 */
    background-color: #F77E94;
}
.pink::-moz-focus-inner{border:0}
.pink:hover {
    border-top: 1px solid #E26272;
    box-shadow:
        inset 0 1px #F9AAB5,
        inset 1px 0 #F99AAB,
        inset -1px 0 #F99AAB,
        inset 0 -1px #F99BAC,
        0 2px #CB5462,
        0 3px #B84D5A,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #f57184 0%, #f78297 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f57184), color-stop(100%,#f78297)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f57184 0%,#f78297 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f57184 0%,#f78297 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f57184 0%,#f78297 100%); /* IE10+ */
    background: linear-gradient(top,  #f57184 0%,#f78297 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f57184', endColorstr='#f78297',GradientType=0 ); /* IE6-9 */
    background-color: #F77E94;
}
.pink:active {
    top: 3px;
    border: 1px solid #C75866;
    border-top: 1px solid #A14753;
    border-bottom: 1px solid #DA6070;
    background: #F56C7E;
    box-shadow: inset 0 1px 2px #C13345;
}
.gray {
    width: 120px;
    height: 32px;
    padding: 0 0 2px;
    font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
    outline: none;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    color: #555;
    text-shadow: 1px 1px #D6D6D6;
    border: 1px solid #959595;
    border-top: 1px solid #B4B4B4;
    border-bottom: 1px solid #7B7B7B;
    box-shadow:
        inset 0 1px #E3E3E3,
        inset 1px 0 #CECECE,
        inset -1px 0 #CECECE,
        inset 0 -1px #BDBDBD,
        0 2px #878787,
        0 3px #7B7B7B,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #d1d1d1 0%, #afafaf 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d1d1d1), color-stop(100%,#afafaf)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d1d1d1 0%,#afafaf 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d1d1d1 0%,#afafaf 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d1d1d1 0%,#afafaf 100%); /* IE10+ */
    background: linear-gradient(top,  #d1d1d1 0%,#afafaf 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#afafaf',GradientType=0 ); /* IE6-9 */
    background-color: #C0C0C0;
}
.gray::-moz-focus-inner{border:0}
.gray:hover {
    border-top: 1px solid #A2A2A2;
    box-shadow:
        inset 0 1px #D4D4D4,
        inset 1px 0 #CECECE,
        inset -1px 0 #CECECE,
        inset 0 -1px #CECECE,
        0 2px #878787,
        0 3px #7B7B7B,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #b7b7b7 0%, #c2c2c2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7b7b7), color-stop(100%,#c2c2c2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b7b7b7 0%,#c2c2c2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b7b7b7 0%,#c2c2c2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b7b7b7 0%,#c2c2c2 100%); /* IE10+ */
    background: linear-gradient(top,  #b7b7b7 0%,#c2c2c2 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7b7b7', endColorstr='#c2c2c2',GradientType=0 ); /* IE6-9 */
    background-color: #C0C0C0;
}
.gray:active {
    top: 3px;
    border: 1px solid #919191;
    border-top: 1px solid #757575;
    border-bottom: 1px solid #9F9F9F;
    background: #B3B3B3;
    box-shadow: inset 0 1px 2px #7F7F7F;
}
.blue {
    width: 120px;
    height: 32px;
    padding: 0 0 2px;
    font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
    outline: none;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    color: #42788E;
    text-shadow: 1px 1px #B6E6F9;
    border: 1px solid #60A7C1;
    border-top: 1px solid #8CC5D9;
    border-bottom: 1px solid #4191B0;
    box-shadow:
        inset 0 1px #CDEFFB,
        inset 1px 0 #A8E2F8,
        inset -1px 0 #A8E2F8,
        inset 0 -1px #8DD9F5,
        0 2px #589CB6,
        0 3px #4E8AA1,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #abe4f8 0%, #74d0f4 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#abe4f8), color-stop(100%,#74d0f4)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #abe4f8 0%,#74d0f4 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #abe4f8 0%,#74d0f4 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #abe4f8 0%,#74d0f4 100%); /* IE10+ */
    background: linear-gradient(top,  #abe4f8 0%,#74d0f4 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abe4f8', endColorstr='#74d0f4',GradientType=0 ); /* IE6-9 */
    background-color: #8CD8F6;
}
.blue::-moz-focus-inner{border:0}
.blue:hover {
    border-top: 1px solid #79ACBE;
    box-shadow:
        inset 0 1px #B2E6F8,
        inset 1px 0 #A8E2F8,
        inset -1px 0 #A8E2F8,
        inset 0 -1px #A8E2F8,
        0 2px #589CB6,
        0 3px #4E8AA1,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #80d4f5 0%, #92dbf6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80d4f5), color-stop(100%,#92dbf6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #80d4f5 0%,#92dbf6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #80d4f5 0%,#92dbf6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #80d4f5 0%,#92dbf6 100%); /* IE10+ */
    background: linear-gradient(top,  #80d4f5 0%,#92dbf6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80d4f5', endColorstr='#92dbf6',GradientType=0 ); /* IE6-9 */
    background-color: #8CD8F6;
}
.blue:active {
    top: 3px;
    border: 1px solid #72AFC5;
    border-top: 1px solid #5C8D9F;
    border-bottom: 1px solid #7DBFD8;
    background: #8CD6F3;
    box-shadow: inset 0 1px 2px #50A5C5;
}
.orange {
    width: 120px;
    height: 32px;
    padding: 0 0 2px;
    font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
    outline: none;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    color: #704A25;
    text-shadow: 1px 1px #FEDFA0;
    border: 1px solid #D2A146;
    border-top: 1px solid #EAB551;
    border-bottom: 1px solid #AF8234;
    box-shadow:
        inset 0 1px #FEE9AA,
        inset 1px 0 #FED67F,
        inset -1px 0 #FEDA85,
        inset 0 -1px #FECA6F,
        0 2px #B98A37,
        0 3px #9F7630,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top, #feda71 0%, #febe4d 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feda71), color-stop(100%,#febe4d)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #feda71 0%,#febe4d 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #feda71 0%,#febe4d 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #feda71 0%,#febe4d 100%); /* IE10+ */
    background: linear-gradient(top, #feda71 0%,#febe4d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feda71', endColorstr='#febe4d',GradientType=0 ); /* IE6-9 */
    background-color: #FED166;
}
.orange::-moz-focus-inner{border:0}
.orange:hover {
    border-top: 1px solid #E6A93D;
    box-shadow:
        inset 0 1px #FEDB98,
        inset 1px 0 #FED67F,
        inset -1px 0 #FEDA85,
        inset 0 -1px #FED781,
        0 2px #B98A37,
        0 3px #9F7630,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top, #fec455 0%, #fecd61 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fec455), color-stop(100%,#fecd61)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fec455 0%,#fecd61 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fec455 0%,#fecd61 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #fec455 0%,#fecd61 100%); /* IE10+ */
    background: linear-gradient(top, #fec455 0%,#fecd61 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec455', endColorstr='#fecd61',GradientType=0 ); /* IE6-9 */
    background-color: #FED166;
}
.orange:active {
    top: 3px;
    border: 1px solid #CF9D42;
    border-top: 1px solid #A77F35;
    border-bottom: 1px solid #E2AC48;
    background: #FEC151;
    box-shadow: inset 0 1px 2px #C49846;
}
.green {
    width: 120px;
    height: 32px;
    padding: 0 0 2px;
    font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
    outline: none;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    color: #5D7731;
    text-shadow: 1px 1px #D0E5A4;
    border: 1px solid #89A94D;
    border-top: 1px solid #AAD063;
    border-bottom: 1px solid #6D883B;
    box-shadow:
        inset 0 1px #E0EEB6,
        inset 1px 0 #C6E08D,
        inset -1px 0 #C6E08D,
        inset 0 -1px #B4D579,
        0 2px #799545,
        0 3px #6D883B,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #cae285 0%, #a3cd5a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cae285), color-stop(100%,#a3cd5a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #cae285 0%,#a3cd5a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #cae285 0%,#a3cd5a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #cae285 0%,#a3cd5a 100%); /* IE10+ */
    background: linear-gradient(top,  #cae285 0%,#a3cd5a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cae285', endColorstr='#a3cd5a',GradientType=0 ); /* IE6-9 */
    background-color: #B6D76F;
}
.green::-moz-focus-inner{border:0}
.green:hover {
    border-top: 1px solid #98B85B;
    box-shadow:
        inset 0 1px #CCE3A1,
        inset 1px 0 #C6E08D,
        inset -1px 0 #C6E08D,
        inset 0 -1px #C7E18E,
        0 2px #799545,
        0 3px #6D883B,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #abd164 0%, #b9d972 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#abd164), color-stop(100%,#b9d972)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #abd164 0%,#b9d972 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #abd164 0%,#b9d972 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #abd164 0%,#b9d972 100%); /* IE10+ */
    background: linear-gradient(top,  #abd164 0%,#b9d972 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abd164', endColorstr='#b9d972',GradientType=0 ); /* IE6-9 */
    background-color: #B6D76F;
}
.green:active {
    top: 3px;
    border: 1px solid #88A84E;
    border-top: 1px solid #6E883F;
    border-bottom: 1px solid #95B855;
    background: #A7CF5F;
    box-shadow: inset 0 1px 2px #779441;
}
.violet {
    width: 120px;
    height: 32px;
    padding: 0 0 2px;
    font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
    outline: none;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    color: #7B5777;
    text-shadow: 1px 1px #EACAE6;
    border: 1px solid #AD7CA8;
    border-top: 1px solid #DA9FD4;
    border-bottom: 1px solid #865D82;
    box-shadow:
        inset 0 1px #F2DCEF,
        inset 1px 0 #E6C0E2,
        inset -1px 0 #E6C0E2,
        inset 0 -1px #DDABD9,
        0 2px #946890,
        0 3px #865D82,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #e8c4e4 0%, #d698d0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8c4e4), color-stop(100%,#d698d0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e8c4e4 0%,#d698d0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e8c4e4 0%,#d698d0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e8c4e4 0%,#d698d0 100%); /* IE10+ */
    background: linear-gradient(top,  #e8c4e4 0%,#d698d0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8c4e4', endColorstr='#d698d0',GradientType=0 ); /* IE6-9 */
    background-color: #DFAEDA;
}
.violet::-moz-focus-inner{border:0}
.violet:hover {
    border-top: 1px solid #CA91C4;
    box-shadow:
        inset 0 1px #E9C7E6,
        inset 1px 0 #E6C0E2,
        inset -1px 0 #E6C0E2,
        inset 0 -1px #E6C1E2,
        0 2px #946890,
        0 3px #865D82,
        0 4px 2px rgba(0,0,0,0.4)
    ;
    background: -moz-linear-gradient(top,  #daa2d4 0%, #e0b1db 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#daa2d4), color-stop(100%,#e0b1db)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #daa2d4 0%,#e0b1db 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #daa2d4 0%,#e0b1db 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #daa2d4 0%,#e0b1db 100%); /* IE10+ */
    background: linear-gradient(top,  #daa2d4 0%,#e0b1db 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#daa2d4', endColorstr='#e0b1db',GradientType=0 ); /* IE6-9 */
    background-color: #DFAEDA;
}
.violet:active {
    top: 3px;
    border: 1px solid #AF80AB;
    border-top: 1px solid #8E678A;
    border-bottom: 1px solid #C08CBB;
    background: #D89DD2;
    box-shadow: inset 0 1px 2px #A763A0;
}
.aqua {
    width: 120px;
    height: 32px;
    padding: 0 0 2px;
    font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
    outline: none;
    position: relative;
cursor: pointer;
    border-radius: 3px;
    color: #437B7D;
    text-shadow: 1px 1px #BEF3F5;
    border: 1px solid #65B3B6;
    border-top: 1px solid #87D3D5;
    border-bottom: 1px solid #47989B;
    box-shadow:
    inset 0 1px #D4F8F8,
        inset 1px 0 #B1F1F3,
        inset -1px 0 #B1F1F3,
        inset 0 -1px #98ECEE,
        0 2px #4FA7AA,
        0 3px #47989B,
        0 4px 2px rgba(0,0,0,0.4)
        ;
    background: -moz-linear-gradient(top,  #b7f2f4 0%, #81e8eb 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7f2f4), color-stop(100%,#81e8eb)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b7f2f4 0%,#81e8eb 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b7f2f4 0%,#81e8eb 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b7f2f4 0%,#81e8eb 100%); /* IE10+ */
    background: linear-gradient(top,  #b7f2f4 0%,#81e8eb 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7f2f4', endColorstr='#81e8eb',GradientType=0 ); /* IE6-9 */
    background-color: #9BEDEF;
    }
.aqua::-moz-focus-inner{border:0}
.aqua:hover {
border-top: 1px solid #79C5C7;
    box-shadow:
    inset 0 1px #B9F2F5,
        inset 1px 0 #B1F1F3,
        inset -1px 0 #B1F1F3,
        inset 0 -1px #B2F1F3,
        0 2px #4FA7AA,
        0 3px #47989B,
        0 4px 2px rgba(0,0,0,0.4)
        ;
    background: -moz-linear-gradient(top,  #8deaed 0%, #9fedf0 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8deaed), color-stop(100%,#9fedf0)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #8deaed 0%,#9fedf0 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #8deaed 0%,#9fedf0 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #8deaed 0%,#9fedf0 100%); /* IE10+ */
    background: linear-gradient(top,  #8deaed 0%,#9fedf0 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8deaed', endColorstr='#9fedf0',GradientType=0 ); /* IE6-9 */
    background-color: #9BEDEF;
    }
.aqua:active {
top: 3px;
    border: 1px solid #6EBDC0;
    border-top: 1px solid #58999B;
    border-bottom: 1px solid #78CFD2;
    background: #87E9EC;
    box-shadow: inset 0 1px 2px #4DBABD;
    }
.slategray {
width: 120px;
    height: 32px;
    padding: 0 0 2px;
    font: 16px "Trebuchet MS", Tahoma, Arial, sans-serif;
    outline: none;
    position: relative;
    cursor: pointer;
    border-radius: 3px;
    color: #515F6A;
    text-shadow: 1px 1px #C4D0DA;
    border: 1px solid #7C8A93;
    border-top: 1px solid #A1AEB7;
    border-bottom: 1px solid #5D6B75;
    box-shadow:
    inset 0 1px #D8E0E6,
        inset 1px 0 #B7C6D1,
        inset -1px 0 #B7C6D1,
        inset 0 -1px #A1B5C4,
        0 2px #62727E,
        0 3px #5D6B75,
        0 4px 2px rgba(0,0,0,0.4)
        ;
    background: -moz-linear-gradient(top,  #becbd6 0%, #8da5b7 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#becbd6), color-stop(100%,#8da5b7)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #becbd6 0%,#8da5b7 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #becbd6 0%,#8da5b7 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #becbd6 0%,#8da5b7 100%); /* IE10+ */
    background: linear-gradient(top,  #becbd6 0%,#8da5b7 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#becbd6', endColorstr='#8da5b7',GradientType=0 ); /* IE6-9 */
    background-color: #A5B8C6;
    }
.slategray::-moz-focus-inner{border:0}
.slategray:hover {
border-top: 1px solid #96A2AB;
    box-shadow:
    inset 0 1px #C0CED7,
        inset 1px 0 #B7C6D1,
        inset -1px 0 #B7C6D1,
        inset 0 -1px #B9C8D3,
        0 2px #62727E,
        0 3px #5D6B75,
        0 4px 2px rgba(0,0,0,0.4)
        ;
    background: -moz-linear-gradient(top,  #97adbd 0%, #a8bac8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#97adbd), color-stop(100%,#a8bac8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #97adbd 0%,#a8bac8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #97adbd 0%,#a8bac8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #97adbd 0%,#a8bac8 100%); /* IE10+ */
    background: linear-gradient(top,  #97adbd 0%,#a8bac8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97adbd', endColorstr='#a8bac8',GradientType=0 ); /* IE6-9 */
    background-color: #A5B8C6;
    }
.slategray:active {
top: 3px;
    border: 1px solid #778998;
    border-top: 1px solid #606F7A;
    border-bottom: 1px solid #8296A6;
    background: #92A9BA;
    box-shadow: inset 0 1px 2px #5F7281;
    }
</strong>

Рекомендуем

Теги

SEO HTML CSS JavaScript

Смотрите также

Веб-студия

  • Услуги и Цены
  • Аренда сайтов
  • Реклама на наших проектах
  • Журнал о Web технологиях

Сделаем

  • Сайт-Визитку
  • Интернет-магазин
  • Landing Page
  • Поддержка сайта

Заполним

  • Написание статей
  • Обмен данными
  • Парсинг сайтов

Продвинем

  • Контекстная реклама
  • Продвижение сайта
  • Социальные сети
  • Автопостинг новостей

Наши контакты

W1C : Первый Веб-Консультант
mail@w1c.ru
Пн - Пт: 10:00 - 20:00

Дизайн и разработка сайта - W1C на W1CMS
W1C : Web First Consultant - Intelligence everywhere ©