Красивые желтоватые кнопки на чистом CSS3 с хаками

Кнопки на CSS3

Иллюстрация-скриншот к заметке: как всегда решил начать с Image. Слева на рисунке показана кнопка-ссылка в обычном состоянии, а справа вид при наведении курсора мышки.

CSS-сниппет: стили и пример HTML-разметки

.go_to_druweb { 
	margin-top: 5px;
	float: left;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	color: #333;
	padding: 8px 16px;
	border: 1px solid #825C1A;
	background-color: #DAA948;
	background-repeat: repeat-x;
	/* Для линуксового браузера, название движка сейчас и не вспомню. Что-то типа Konqueror. */
	background-image: -khtml-gradient(linear,left top,left bottom,from(#F0D862),to(#DAA948));
	/* Для мозилловского Gecko. */
	background-image: -moz-linear-gradient(top,#F0D862,#DAA948);
	/* По идее для Microsoft Internet Explorer. Только вот на восьмерке под Windows Seven трюк не работает. */
	background-image: -ms-linear-gradient(top,#F0D862,#DAA948);
	/* Для вебкит, т.е. это Google Chrome и Apple Safari. */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#F0D862),color-stop(100%,#DAA948));
	background-image: -webkit-linear-gradient(top,#F0D862,#DAA948);
	/* Для Оперы. */
	background-image: -o-linear-gradient(top,#F0D862,#DAA948);
	/* Для браузеров, которые полностью поддерживают CSS3. */
	background-image: linear-gradient(top,#F0D862,#DAA948);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f0d862',endColorstr='#daa948',GradientType=0);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	text-decoration: none;
	font-size: 13px;
}

.go_to_druweb:hover {
	color: #333;
	text-decoration: none;
	background-color: #C79228;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear,left top,left bottom,from(#EBCC34),to(#C79228));
	background-image: -moz-linear-gradient(top,#EBCC34,#C79228);
	background-image: -ms-linear-gradient(top,#EBCC34,#C79228);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#EBCC34),color-stop(100%,#C79228));
	background-image: -webkit-linear-gradient(top,#EBCC34,#C79228);
	background-image: -o-linear-gradient(top,#EBCC34,#C79228);
	background-image: linear-gradient(top,#EBCC34,#C79228);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ebcc34',endColorstr='#c79228',GradientType=0);
}

Хаки приделаны для корректного, более привлекательного внешнего вида ссылки под устаревшими версиями популярных веб-обозревателей от Firefox до IE. По идее вы может  CSS градиент заменить на обычное зацикленное изображение. Пример HTML составляющей:

<a class="go_to_druweb" href="http://druweb.ru">Перейти на Druweb &raquo;</a>

P.S. Разметку и стили вытянул встроенным отладчиком Хрома с одного зарубежного сайта.



Ортодонтия. Всегда в наличии брекет-система damon наша цена вас порадует Петербург. . МультиПАК. Компания предлагает пищевые пвх стрейч пленки со склада с доставкой.

© 2012-2014 Druweb.ru. Вы можете спокойно копировать любые материалы сайта только при наличии обратной ссылки.