Кнопки CSS

Еще один вариант оформления кнопок при помощи каскадных таблиц стилей. В одной из заметок мы рассматривали как сделать кнопку с бликом. В том случае мы использовали свойство background-position, фон сдвигался на определнное кол-во пикселей, тем самым создавая эффект блика:

Давайте рассмотрим еще один вариант с использованием градиента и стоп-цвета. Создадим кнопку в html-документе:

<button>Button</button>

Теперь пропишем для нее свойства:

button {
	display: inline-block; /*Отображение на экране*/
	cursor: pointer; /*Вид курсора*/
	width: 102px; /*Ширина кнопки*/
	height: 46px; /*Высота кнопки*/
	border-radius: 3px; /*Кнопка с скругленными уголками*/
	-webkit-border-radius: 3px; /*Кнопка с скругленными уголками*/
	-moz-border-radius: 3px; /*Кнопка с скругленными уголками*/
	border: 1px solid black; /*Граница кнопки*/
	box-shadow: inset 0 1px 0 rgba(255,255,255,.5); /*Внутренняя тень*/
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); /*Внутренняя тень*/
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5); /*Внутренняя тень*/
	color: white; /*Цвет текста*/
	background-color: #0045d2; /*Фон кнопки*/
	*background-color: #0045d2; /*Фон кнопки для IE7*/
}

Добавим градиент, используя стоп-цвет:

	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255,255,255,0.2)), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.5, transparent), color-stop(1,rgba(255,255,255,0.15)), to(transparent));
	background-image: -webkit-linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 50%, rgba(255, 255, 255, 0.15) 100%);
	background-image: -moz-linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 50%, rgba(255, 255, 255, 0.15) 100%);
	background-image: -ms-linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 50%, rgba(255, 255, 255, 0.15) 100%);
	background-image: -o-linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 50%, rgba(255, 255, 255, 0.15) 100%);
	background-image: linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 50%, rgba(255, 255, 255, 0.15) 100%);

Кнопки CSS

Из рисунка видно, у нас имеется три позиции: где начинается блик (0%), где заканчивается блик (50%), дальше идет прозрачный цвет transparent, он также начинается с позиции 50%, и заканчивается цвет на позиции 100%, при этом прозрачность его равна 0.15, таким образом создается эффект внутреннего свечения.

Смотреть пример

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

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

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



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

Кнопки CSS | | 2012-07-09 16:58:00 | | Статьи Web-мастеру | | Еще один вариант оформления кнопок при помощи каскадных таблиц стилей. В одной из заметок мы рассматривали как сделать кнопку с бликом. В том случае мы использовали свойство background-position, фон | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: