Кнопки

Кнопки с использованием <button> и CSS3

Здесь приведены несколько примеров кнопок, созданных на основе тега <button> и стилевых параметров CSS3.

Простая кнопка без стилизации посредством CSS может быть создана так:

<button>Кнопка<br>без стилизации</button>

.button1 { /* Продолговатая*/
	color:white;
	text-shadow:1px 1px 1px black;
	width:130px;
	border-width:1px;
	border-color:blue;
	border-radius:30px;
	background:radial-gradient(ellipse, #00ffff, #000080);
}

.button2 { /* Круглая */
	color:white;
	text-shadow:1px 1px 1px black;
	width:80px;height:80px; /* квадрат */
	border-width:40px;      /* 1/2 стороны квадрата */
	border-color:blue;
	border-radius:40px;
	background:radial-gradient( at 10% 10%, #00ffff, #000080);
}

Для подсветки кнопок при наведении мыши применены следующие параметры:

.button1:hover, .button2:hover{ /* Наведение мыши */
	background:radial-gradient(#60ffff, #0000ff);
}

Пример кнопки с линейным градиентом фона и закругленными углами:

.button3 { /* Кнопка с линейным градиентом */
	color:red;
	text-shadow:1px 1px 1px black;
	width:80px;height:40px;	
	border-width:1px;
	border-color:#606060;
	border-radius:15px;
	background:linear-gradient(black,white,black);
}
.button3:hover { /* Наведение мыши */
	background:linear-gradient(gray,white,gray);
}

Еще о кнопках...
О градиентах...