- Все для CMS | Joomla, Drupal, phpBB, Wordpress, DLE, IPB - http://cmsart.ru -

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

Posted By Archi On 19.06.2012 @ 12:14 дп In HTML-верстка | No Comments

Две простые серые кнопочки созданы при помощи свойств 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

А вот и пример [1]:

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

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


Article printed from Все для CMS | Joomla, Drupal, phpBB, Wordpress, DLE, IPB: http://cmsart.ru

URL to article: http://cmsart.ru/articles/html-articles/prostyie-seryie-knopki-na-css3

URLs in this post:

[1] А вот и пример: http://cmsart.ru/goto/http://dabblet.com/gist/2942070

[2] css-live.ru: http://cmsart.ru/?goto=http%3A%2F%2Fcss-live.ru

Copyright © 2012 Поддержка CMS | Документация, статьи по Joomla, Drupal, phpBB. All rights reserved.