Главная » Полезные статьи » HTML-верстка » Простые серые кнопки на CSS3
Распечатать статью

Простые серые кнопки на CSS3

Две простые серые кнопочки созданы при помощи свойств CSS3: linear-gradient и border-radius. Градиенты использованы в качестве background для кнопок, а слегка затемнённые края придают им простой и красивый вид.

При наведении или нажатии фон градиента создаёт эффект «нажатия», а затемнение краёв увеличивается. Этот эффект не будет использоваться в IE8 и ниже, так как эти браузеры не поддерживают градиенты.

HTML:

<div>
    <a href="#">We're Cool</a>
    <a href="#">and Simple!</a>
</div>

CSS:

div { margin: 10px }

a {
    margin-right: 5px;
    padding: 4px 6px;
    background-color: #f5f5f5;
    line-height: 20px;
    text-decoration: none;
    color: #666;
    font-size: 12px;
    font-family: Georgia;
    display: inline-block;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
    background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

a:hover,
a:active,
a:focus {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f1f1f1),to(#f5f5f5));
    background-image: -webkit-linear-gradient(top,#f1f1f1,#f5f5f5);
    background-image: -moz-linear-gradient(top,#f1f1f1,#f5f5f5);
    background-image: -o-linear-gradient(top,#f1f1f1,#f5f5f5);
    background-image: -ms-linear-gradient(top,#f1f1f1,#f5f5f5);
    background-image: linear-gradient(top,#f1f1f1,#f5f5f5);
}

Не поддерживаются браузеры:

  • ниже Internet Explorer 8.0

А вот и пример:

Скриншоты браузеров:

Источник:  css-live.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

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

Похожие статьи