Благодаря градиентам нет необходимости создавать бэкграунды, теребить сплайны… Теперь несколькими строками можно обеспечить сайт красивой кнопкой и разгрузить пользователя от бесконечных картинок.
Сразу покажу что у меня получилось:
.submit {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);}
Как видите мы уместились на четвертинку листочка из тетрадки 😉
Теперь рассмотрим что да как…
Первый блок (я разделил их пустыми строками!) задаёт самые основные параметры кнопки: eё расположение, ориентацию текста в ней и его шрифт. Тут новых свойств нет, так что если чего не поняли го гугл и всё норм…
Затем задаётся тень текста в кнопке при помощи text-shadow. Об этом можно посмотреть тут.
Следующий блок скругляет кнопку. Все три строки делают одно и тоже но на разных движках веб обозревателей. Параметр — радиус скругления.
Предпоследний блок добавляет тень кнопки. Тут нет тени в том смысле в котором мы привыкли её наблюдать, ведь цвет — rgba(0,0,0,.2). Это всего на 20 процентов не прозрачный чёрный слой…
Ну и последний блок задаёт параметры цвета шрифта кнопки, её обводки, фона ни конечно же градиента.
Именно две последние строки кода делаю кнопку такой как она есть))
Я уже писал о градиентах, повторятся не буду…
Можете добавить эффекты для событий наведения курсора и нажатия.. я не буду этого делать! тем более, что делается это аналогично
Пример тут.
До новых встреч 😉
