Web: Моя первая CSS3 кнопка

Теперь буду выкладывать свою CSS графику. Это серая кнопка, с градиентом, под все браузеры.

Пример работы



Кнопка

HTML код

<button class="zgshell">Пример</button>
<a class="zgshell">Кнопка</a>

CSS код

.zgshell {
	padding: 7px 15px;
	border: 1px solid #aaa;
	background: #888;
	background: -webkit-linear-gradient(top, #888, #666);
	background:    -moz-linear-gradient(top, #888, #666);
	background: 	-ms-linear-gradient(top, #888, #666);
	background:      -o-linear-gradient(top, #888, #666);
	background:         linear-gradient(top, #888, #666);
	margin: 0;
	-webkit-border-radius: 5px;
	 -khtml-border-radius: 5px;
	   -moz-border-radius: 5px;
	    -ie-border-radius: 5px;
	     -o-border-radius: 5px;
	        border-radius: 5px;
	color:#fff;
	text-align: center;
	text-shadow: 0 -1px 0 #555;
	font-weight: bold;
  	font-size:13px;
	cursor: pointer;
	outline: none;
	text-decoration: none;
}
.zgshell:hover {
	background: #777;
	background: -webkit-linear-gradient(top, #888, #777);
	background:    -moz-linear-gradient(top, #888, #777);
	background:     -ms-linear-gradient(top, #888, #777);
	background:      -o-linear-gradient(top, #888, #777);
	background:         linear-gradient(top, #888, #777);
}
.zgshell:active {
	background: #666;
	background: -webkit-linear-gradient(top, #666, #888);
	background:    -moz-linear-gradient(top, #666, #888);
	background:     -ms-linear-gradient(top, #666, #888);
	background:      -o-linear-gradient(top, #666, #888);
	background:         linear-gradient(top, #666, #888);
}
  • Мда. Красиво, придраться не к чему, но вот убивает меня, что несколько десятков строк нужно для маааленькой кнопочки

  • Pingback: Web? Новая кнопка | Блог ZiGGi()

  • Пофиксил кнопку для IE.

Перейти к верхней панели