CSS3 кнопки

В заметках по фотошопу мы создавали различные варианты кнопок: с картинками, без картинок, с градиентом, с скругленными уголками и т.д. В этой заметке я покажу пример тех самых кнопок, но уже сверстанных при помощи свойств CSS3.

В html шаблоне создаем кнопку с классом play:

<button class="play"><img src="/play.png">Play</button>

Добавляем путь к картинке при помощи тега <img>. Картинку можно взять здесь

Для кнопки Stop записываем в html шаблоне строку (картинку берем здесь):

<button class="stop"><img src="/stop.png">Stop</button>

И для остальных классы будут такие:

<button class="silver">CSS3 button</button>
<button class="orange">CSS3 button</button>
<button class="gray">Кнопка</button>

Для всех кнопок нужно указать следующие свойства:

button {
	cursor: pointer;
	display: inline-block;
	line-height: normal;
	-webkit-transition: 0.1s linear all;
    -moz-transition: 0.1s linear all;
    -ms-transition: 0.1s linear all;
    -o-transition: 0.1s linear all;
    transition: 0.1s linear all;
}

button:focus {
	outline: none;
}

Далее, свойства для кнопки Play:

/*Play*/
button.play{
	background-color: #003884;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0066bd), to(#003884));
    background-image: -webkit-linear-gradient(#0066bd, #003884);
    background-image: -moz-linear-gradient(top, #0066bd, #003884);
    background-image: -ms-linear-gradient(#0066bd, #003884);
    background-image: -o-linear-gradient(#0066bd, #003884);
    background-image: linear-gradient(#0066bd, #003884);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066bd', endColorstr='#003884', GradientType=0); 
	-webkit-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	border: 2px solid #003884;
	color: white;
	font-weight: bold;
	font-size: 36px;
	padding: 18px 34px 22px;
	text-shadow: 0 2px 0 rgba(0,0,0, 0.75);
}

button.play>img {
	margin-right: 14px;
	vertical-align: middle;
}

button.play:hover {
	background-position: 0 -15px;
}

Свойства для кнопки Stop:

/*Stop*/
button.stop {
	background-color: #003884;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0066bd), to(#003884));
    background-image: -webkit-linear-gradient(#0066bd, #003884);
    background-image: -moz-linear-gradient(top, #0066bd, #003884);
    background-image: -ms-linear-gradient(#0066bd, #003884);
    background-image: -o-linear-gradient(#0066bd, #003884);
    background-image: linear-gradient(#0066bd, #003884);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066bd', endColorstr='#003884', GradientType=0); 
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	border: 1px solid #003884;
	color: white;
	font-weight: bold;
	font-size: 18px;
	padding: 8px 18px 10px;
	text-shadow: 0 2px 0 rgba(0,0,0, 0.75);
}

button.stop>img {
	margin-right: 10px;
	vertical-align: middle;
}

button.stop:hover {
	background-position: 0 -15px;
}

Свойства для серой кнопки:

/*Silver*/
button.silver {
	background-color: #dedede;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#dedede));
    background-image: -webkit-linear-gradient(#f4f4f4, #dedede);
    background-image: -moz-linear-gradient(top, #f4f4f4, #dedede);
    background-image: -ms-linear-gradient(#f4f4f4, #dedede);
    background-image: -o-linear-gradient(#f4f4f4, #dedede);
    background-image: linear-gradient(#f4f4f4, #dedede);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4', endColorstr='#dedede', GradientType=0); 
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
	border: 1px solid #b6b6b6;
	color: #313131;
	font-weight: bold;
	font-size: 16px;
	padding: 10px 20px 11px;
	text-shadow: 0 1px 0 rgba(255,255,255, 0.75);
}

button.silver:hover {
	background-position: 0 -15px;
}

Свойства для оранжевой кнопки:

/*Orange*/
button.orange {
	background-color: #dc5800;
    background-repeat: no-repeat;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff8f2c), to(#dc5800));
    background-image: -webkit-linear-gradient(#ff8f2c, #dc5800);
    background-image: -moz-linear-gradient(top, #ff8f2c, #dc5800);
    background-image: -ms-linear-gradient(#ff8f2c, #dc5800);
    background-image: -o-linear-gradient(#ff8f2c, #dc5800);
    background-image: linear-gradient(#ff8f2c, #dc5800);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8f2c', endColorstr='#dc5800', GradientType=0); 
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.55);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.55);
    box-shadow: 0 1px 5px rgba(0,0,0,0.55);
	border: 3px solid white;
	color: white;
	font-weight: bold;
	font-size: 16px;
	padding: 10px 19px;
	text-shadow: 0 1px 0 rgba(0,0,0, 0.36);
}

button.orange:hover {
	background-color: #46c728;
	background-image: none;
}

И кнопка с бликом:

/*Gray*/
button.gray {
	background-color: #a5a5a5;
	background-repeat: no-repeat;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4b4b4b), to(#a5a5a5));
    background-image: -webkit-linear-gradient(#4b4b4b, #a5a5a5);
    background-image: -moz-linear-gradient(top, #4b4b4b, #a5a5a5);
    background-image: -ms-linear-gradient(#4b4b4b, #a5a5a5);
    background-image: -o-linear-gradient(#4b4b4b, #a5a5a5);
    background-image: linear-gradient(#4b4b4b, #a5a5a5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b4b4b', endColorstr='#a5a5a5', GradientType=0);
	border: 1px solid #545454;
	color: white;
	font-weight: bold;
	font-size: 16px;
	padding: 9px 19px 10px;
	background-position: 0 20px;
}

button.gray:hover {
	background-color: #cbcbcb;
	background-repeat: no-repeat;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4b4b4b), to(#cbcbcb));
    background-image: -webkit-linear-gradient(#4b4b4b, #cbcbcb);
    background-image: -moz-linear-gradient(top, #4b4b4b, #cbcbcb);
    background-image: -ms-linear-gradient(#4b4b4b, #cbcbcb);
    background-image: -o-linear-gradient(#4b4b4b, #cbcbcb);
    background-image: linear-gradient(#4b4b4b, #cbcbcb);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b4b4b', endColorstr='#cbcbcb', GradientType=0);
	text-shadow: 0 1px 0 #222222;
}

Скачать архив с кнопками

Источник: http://psd-html-css.ru/css-notes/css3-knopki

Читать комменты и комментировать

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



Защитный код
Обновить

CSS3 кнопки | | 2012-06-05 21:04:00 | | Статьи Web-мастеру | | В заметках по фотошопу мы создавали различные варианты кнопок: с картинками, без картинок, с градиентом, с скругленными уголками и т.д. В этой заметке я покажу пример тех самых кнопок, но уже | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: