Web: Новая кнопка

Сделал новую кнопку, выглядит более стильно, чем предыдущая. Правда теперь она подойдёт только для тёмного фона.

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

HTML код

<button class="zishell">Пример</button>
<div style="background-color: #343434; padding: 20px; width: 85px">
    <button class="zishell">Пример</button>
</div>

CSS код

button.zishell, input[type="button"].zishell, input[type="submit"].zishell, a.zishell {
	padding: 6px 15px;
	border: 1px solid #4a4a4a;
	background: #444;
	background: -webkit-linear-gradient(top, #444, #333);
	background:    -moz-linear-gradient(top, #444, #333);
	background: 	-ms-linear-gradient(top, #444, #333);
	background:      -o-linear-gradient(top, #444, #333);
	background:         linear-gradient(top, #444, #333);
	margin: 0;
	color: #ccc;
	text-align: center;
	text-shadow: 0 -1px 0 #222;
	font-weight: bold;
  	font-size:13px;
	cursor: pointer;
	outline: none;
	text-decoration: none;
}
button.zishell:hover, input[type="button"].zishell:hover, input[type="submit"].zishell:hover, a.zishell:hover {
	color: #eee;
	background: #4d4d4d;
	background: -webkit-linear-gradient(top, #4d4d4d, #333);
	background:    -moz-linear-gradient(top, #4d4d4d, #333);
	background:     -ms-linear-gradient(top, #4d4d4d, #333);
	background:      -o-linear-gradient(top, #4d4d4d, #333);
	background:         linear-gradient(top, #4d4d4d, #333);
}
button.zishell:active, input[type="button"].zishell:active, input[type="submit"].zishell:active, a.zishell:active {
	color: #bbb;
	background: #333;
}
  • Пофиксил кнопку для IE.

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