Кнопки на CSS. Примеры

Кнопки на CSS

WEB - страница	Код в документе HTML
1. Стандартная кнопка Windows	<a href="image-01.gif"> <input type="button" value="Новые 100 рублей"> </a>

WEB - страница

Код в документе HTML

2. Кнопка цветная
с градиентом

/* gradient */ 
background: #15c61b;
background: -moz-linear-gradient(top, #15c61b 0%, #08871b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#15c61b), color-stop(100%,#08871b));
background: -webkit-linear-gradient(top, #15c61b 0%,#08871b 100%);
background: -o-linear-gradient(top, #15c61b 0%,#08871b 100%);
background: -ms-linear-gradient(top, #15c61b 0%,#08871b 100%);
background: linear-gradient(to bottom, #15c61b 0%,#08871b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#15c61b', endColorstr='#08871b',GradientType=0 ); 
/* gradient end */
}

.great_btn:hover{
background: #15c61b;
}

.great_btn_around{
box-shadow:0 1px 0 #fff;
border-radius: 3px;
border:1px solid #08871B;
width: 120px;
box-shadow: 0px 1px 3px #eee;
}
</style>

========================
Кнопка:
<div class="great_btn_around">
<input class="great_btn" type="button" value="Купить">
</div>

WEB - страница

Код в документе HTML

3. Фиксированная кнопка прокрутки "Наверх"

▲ Наверх

Вид "Кнопки" смотри
в правом нижнем углу
на этой странице

WEB - страница

Код в документе HTML

4. Кнопка меняет цвет при наведении

Демо