Делаем градиентные кнопки средствами CSS3

Каждый веб-мастер давно наслышан, а кто-то уже виртуозно применяет на практике новые уникальные возможности CSS3. Не так давно мы разбирали несколько интересных текстовых эффектов, на этот раз речь пойдет о градиентных кнопках, созданных без использования графики (картинок), то есть, только средствами CSS3. Сам туториал я обнаружил здесь, вам же предлагаю перевод.

градиент с помощью CSS

(Демо страница)

Итак основные качества будущей кнопки (кнопок):

  • Масштабируемость (в зависимости от размера шрифта и количества текста);
  • Функциональность, юзабилити (предусмотрены состояния кнопки – normal, hover, active)
  • Обратная совместимость (даже на старом или не совместимом браузере кнопки будут выглядеть прилично, хотя конечно не так как задумывалось. В этом можно будет убедиться в конце публикации);
  • Гибкость (эти стили можно применять и к другим элементам, не обязательно для кнопок);

Какие фишки будем использовать в процессе созднаия кнопок? Результат достигается за счет градиентов, свойств box shadow, text shadow, rounded corners, режима RGBA.

Структура HTML

<a href="#" class="button button-blue">
    <span>Button</span>
</a>

CSS

.button
{
    margin: 10px;
    text-decoration: none;
    font: bold 1.5em 'Trebuchet MS',Arial, Helvetica; /*Change the em value to scale the button*/
    display: inline-block;
    text-align: center;
    color: #fff;
 
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.3);            
 
    text-shadow: 0 1px 0 rgba(0,0,0,0.4);
 
    box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .05em rgba(0,0,0,0.4);
 
}
 
.button, .button span
{
    -moz-border-radius: .3em;
    border-radius: .3em;
}
 
.button span
{
    border-top: 1px solid #fff; /* Fallback style */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: block;
    padding: 0.5em 2.5em;
 
    /* The background pattern */
 
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(0, 0, 0, 0.05)), color-stop(.25, transparent), to(transparent)),
                      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05))),
                      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, rgba(0, 0, 0, 0.05)));
    background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
                      -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
 
    /* Pattern settings */
 
    -moz-background-size: 3px 3px;
    -webkit-background-size: 3px 3px;
}
 
.button:hover
{
    box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
}
 
.button:active
{
    /* When pressed, move it down 1px */
    position: relative;
    top: 1px;
}

Синяя кнопка

.button-blue
{
    background: #4477a1;
    background: -webkit-gradient(linear, left top, left bottom, from(#81a8cb), to(#4477a1) );
    background: -moz-linear-gradient(-90deg, #81a8cb, #4477a1);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#81a8cb', endColorstr='#4477a1');
}
 
.button-blue:hover
{
    background: #81a8cb;
    background: -webkit-gradient(linear, left top, left bottom, from(#4477a1), to(#81a8cb) );
    background: -moz-linear-gradient(-90deg, #4477a1, #81a8cb);
    filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4477a1', endColorstr='#81a8cb');
}
 
.button-blue:active
{
    background: #4477a1;
}

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

  • Mozilla 3.6 и старше – полная совместимость, кнопки отображаются именно так как они задуманы со всеми деталями.
  • Google Chrome, Safari (Webkit) – проблем не выявлено, в целом результат не хуже чем на Mozilla.
  • Opera 11 – к сожалению, градиент не отображается вовсе, хорошо хотя бы, что закругленные углы интерпретируются так как нужно.
  • Internet Explorer 6-8 – В данном случае проблема, наоборот, с закругленными углами. Градиент присутствует.
  • Internet Explorer 9 – ситуация несколько лучше чем у браузеров от Microsoft прошлых поколений, но все равно результат не столь хорош, как у Mozilla или Chrome.

Ну, а у меня на этом все. Теперь у вас есть возможность выбрать использовать градиенты для фотошопа или обходиться исключительно с помощью CSS. Изучайте возможность CSS3, оно того стоит! С HTML5 так вообще чудесам можно творить, недавно нашел подборку разных техник и был сильно приятно шокировал делом примерами.

P.S. Постовой. Интернет магазин Линзмастер предлагает купить цветные и обычные контактные линзы по хорошим ценам и с доставкой по Украине.

Понравился пост? Подпишись на обновления блога по Дизайн Мания RSSRSS, Дизайн Мания RSSEmail или твиттерtwitter!
А еще можно опубликовать ссылку на статью в своем блоге:
Опубликовать в twitter.com        

Комментариев - 8 для поста Делаем градиентные кнопки средствами CSS3
  1. ]]> Anton ]]> (March 16, 2011)

    Не хватает примеров, как они выглядят… Тестить самому крайне лениво. :)

  2. ]]> Tod ]]> (March 16, 2011)

    Anton, добавил ссылку на демо страницу.

  3. ]]> Evgeniy ]]> (March 17, 2011)

    Что то в Mozilla Firefox 3.6.15 кнопочки ужасно тормозят

  4. ]]> Tod ]]> (March 17, 2011)

    Evgeniy, да, тоже заметил, странная реакция, может быть пофиксят в следующих версиях фф.

  5. ]]> john ]]> (March 21, 2011)

    ruvisio.ru/9-gradientnyh-css-knopok/ – здесь пример кнопок, на Хроме кстати тормозов вообще нет.

  6. ]]> Grigory ]]> (March 28, 2011)

    Для Opera можно запихнуть SVG с градиентом в data: URI, работать будет хоть в девятой. А ещё я вот такой сервис сделал: http://webgradients.appspot.com — можно поставить Modernizr и прописать типа .no-cssgradients button. Но надо знать примерную высоту тогда.

  7. ]]> Tixen ]]> (September 4, 2011)

    Жалко что нет разборки стилей – было бы интересно изучить создание таких кнопок с нуля.

  8. ]]> Mr.Frog ]]> (February 10, 2012)

    -o-linear-gradient
    для оперы

Оставить комментарий
для статьи Делаем градиентные кнопки средствами CSS3