Прямоугольные кнопки на CSS

В предыдущей статье мы рассказывали о том, как сделать красивые кнопки для сайта на чистом CSS.
Сегодня предлагаю продолжить эту тему и рассмотреть возможности модернизации этих кнопок, а именно — изменение радиуса границ.
Напомню, что кнопка описывается двумя классами. Например кнопка red описывается следующим образом:

input class=«asbtn red» type=«submit» value=«Пример кнопки red»

где класс asbtn – описывает размер кнопки и ее вид, а класс red – отвечает за цвет. Класс asbtn содержит следующий параметр:

border-radius:2px;

- который отвечает за радиус углов. Изменяя его мы можем получить нужную нам кнопку.
Добавим новый класс в buttons.css который будет задавать нулевой радиус углов кнопки:

.asbtn0r {
border-radius:0;
padding:5px 10px;
box-shadow:inset 1px 1px 0 rgba(255,255,255,0.3);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #fff;
text-decoration: none;
display: inline-block;
text-align: center;
margin: .5em .5em .5em 0;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
-webkit-transition: 0.1s linear;
-moz-transition: 0.1s linear;
-ms-transition: 0.1s linear;
-o-transition: 0.1s linear;
transition: 0.1s linear;
}

Теперь кнопки с нулевым радиусом углов будут иметь описание

input class=«asbtn0r red» type=«submit» value=«Пример кнопки red»

Также мы добавили в стили еще один класс, который содержит описание радиуса углов кнопок 7px — asbtn7r. Его использование будет выглядеть так:

input class=«asbtn7r red» type=«submit» value=«Пример кнопки red»

И результат работы:





















Напомним, что скачать buttons.css можно здесь.

Запись опубликована в рубрике Блог, Дизайн, ЛикБез. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">