Красивые кнопки для сайта

В этом уроке Вы научитесь создавать красивые профессиональные кнопки для сайта используя только CSS и никакого графического редактора!!!Вы думаете это не реально? Вы ошибаетесь и я Вам это докажу.Для того, чтобы создать  вот такую вот кнопку для сайта
Кнопка
я использовала 3 свойства CSS3:1. задала градиент — gradient 2. задала красивые уголки — border-radius3. добавила тени — box-shadow Каждое из этих свойств я подробно описала в справочнике. Поэтому на их свойствах я останавливаться не буду. А приведу просто пошаговый пример создания кнопки для сайта.1 шаг.Создаем html код самой кнопки для сайта
Code<a href=»#» class=»botton»>Кнопка</a>
в файле стилей CSS задаем цвет шрифта, фон кнопки и градиент. Подробно о тенях я писала статью CSS градиенты
Code.botton { 
line-height:60px;
margin:12px;
padding:12px 14px 9px 14px;
font: 24px ‘Droid Sans’, sans-serif;
font-weight: bold;  
color: #fafafa !important;  
background: #A6b64c; /* Задаем цвет фона для браузеров, не поддерживающих CSS3*/  
background-image: -moz-linear-gradient(top, #B8E47A, #A6b64c); /* Firefox 3.6 */  
background-image: -webkit-linear-gradient(#B8E47A, #A6b64c); /* Safari & Chrome */  
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#B8E47A’, endColorstr=’#A6b64c’); /* IE6 & IE7 */  
-ms-filter: «progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#B8E47A’, endColorstr=’#A6b64c’)»; /* IE8 */  
}
В результате получается такая кнопка
Красивые кнопки для сайта
Такая кнопка будет выглядеть именно так во всех используемых на сегодняшний день браузерах.
2 шаг
Добавляем уголки: 30px — это радиус верхних уголков, 8px — нижних уголков
Code
.botton { 
line-height:60px;
margin:12px;
padding:12px 14px 9px 14px;
font: 24px ‘Droid Sans’, sans-serif;
font-weight: bold;  
  color: #fafafa !important;  
background: #A6b64c; /* Задаем цвет фона для браузеров, не поддерживающих CSS3*/  
background-image: -moz-linear-gradient(top, #B8E47A, #A6b64c); /* Firefox 3.6 */  
background-image: -webkit-linear-gradient(#B8E47A, #A6b64c); /* Safari & Chrome */  
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#B8E47A’, endColorstr=’#A6b64c’); /* IE6 & IE7 */  
-ms-filter: «progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#B8E47A’, endColorstr=’#A6b64c’)»; /* IE8 */  
border: 1px solid #A6b64c; /* Параметры рамки */  
border-radius:30px 30px 8px 8px;  
-moz-border-radius:30px 30px 8px 8px;  
-webkit-border-radius:30px 30px 8px 8px; 
   
}
Получаем кнопку для сайта вида
Красивые кнопки для сайта

3 шаг
Добавляем тени

Code
.botton { 
line-height:60px;
margin:12px;
padding:12px 14px 9px 14px;
font: 24px ‘Droid Sans’, sans-serif;
font-weight: bold;  
  color: #fafafa !important;  
background: #A6B64C; /* Задаем цвет фона для браузеров, не поддерживающих CSS3*/  
background-image: -moz-linear-gradient(top, #B8E47A, #A6b64c); /* Firefox 3.6 */  
background-image: -webkit-linear-gradient(#B8E47A, #A6b64c); /* Safari & Chrome */  
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#B8E47A’, endColorstr=’#A6b64c’); /* IE6 & IE7 */  
-ms-filter: «progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#B8E47A’, endColorstr=’#A6b64c’)»; /* IE8 */  
border: 1px solid #A6b64c; /* Параметры рамки */  
border-radius:30px 30px 8px 8px;  
-moz-border-radius:30px 30px 8px 8px;  
-webkit-border-radius:30px 30px 8px 8px;  
/* тень */  
-webkit-box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em .3em, /* inner shadow */ #6BAD1F 0 .1em 3px, #A6B64C 0 5px 5px /* color border */ ;
-moz-box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em .3em, /* inner shadow */ #6BAD1F 0 .1em 3px, #A6B64C 0 5px 5px /* color border */ ;
box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em .3em, /* inner shadow */ #6BAD1F 0 .1em 3px, #A6B64C 0 5px 5px /* color border */ ;

}

Поясню: мы добавили 3 тени через запятую.
inset rgba(255, 254, 255, 0.6) 0 0.3em .3em — почти белая тень внутри кнопки смещенная вниз на 0.3em
#6BAD1F 0 .1em 3px — тень светлозеленая внизу кнопки
#A6B64C 0 5px 5px — и еще один оттенок зеленого внизу кнопки.
В результате получаем кнопку вида:
Красивые кнопки для сайта
В принципе кнопка готова. Но добавим еще немного красоты.
4 шаг . При наведении чтобы кнопка немного светлела
Code.botton:hover { background:#BDD585;  
  color:#fff;  
}
и при клике немного опускалась вниз и уменьшались тени
Code.botton:active
{
  /* При нажатии опускаем на 1px */
  position: relative;
  top: 2px;
  -webkit-box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em .3em, /* inner shadow */ #6BAD1F 0 .1em 3px ;
-moz-box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em .3em, /* inner shadow */ #6BAD1F 0 .1em 3px ;
box-shadow: inset rgba(255, 254, 255, 0.6) 0 0.3em .3em, /* inner shadow */ #6BAD1F 0 .1em 3px ;
}
Вот теперь все! Готова красивая кнопочка. И меняя всего лишь цифры, Вы можете создать огромное количество самых разных кнопок.Единственное НО, действия выполненные, начиная с шага 2 , не отразятся в старых браузерах. Но это как раз тот случай, когда это не слишком важно. Кнопка с градиентом, который отразится даже в старых браузерах, уже выглядит вполне прилично и Ваш дизайн ни в коей мере не нарушит. А вот обладатели новых версий оценят Вашу работу. К тому же с выходом IE9, охвачены получаются все последние версии браузеров.Надеюсь, это статья была Вам интересна, ведь кнопки для сайта — это вещь нужная каждому вебмастеру без исключения, а вот нарисовать их под силу не каждому. К тому же отказ от использования лишних картинок позволит Вам увеличить скорость загрузки страницы, что тоже неплохо.

Комментарии на Facebook