Чтобы сделать красивую кнопку нужно знать css функцию linear-gradient в css-свойстве background-image, а так-же нужно знать css-свойства border, border-radius, и box-shadow.
Итак свойство background-image:linear-gradient(to bottom, #2dab1a, #15520b);, в функции linear-gradient (т.е. линейный градиент) первый параметр куда, в данной ситуации вниз, а потом идут код цвета - #2dab1a, #15520b, псевдокласс :hover срабатывает когда, наводят мышь на элемент класса btn. CSS-свойство border рисует рамку solid, шириной в 1 пиксель, и зелёным цветом, а CSS-свойство border-radius это чтобы сделать круглую рамку.
Вот сам код:
Код:
<!DOCTYPE html>
<html>
<head>
<style>
.btn { background-image:linear-gradient(to bottom, #2dab1a, #15520b); border:1px solid #2e452b; width:70px; height:30px; margin:2px 2px; padding:5px 5px; color:#fff; border-radius:3px; box-shadow:0px 0px 3px #2dab1a; text-decoration:none; }
.btn:hover { box-shadow:0px 0px 5px #2dab1a; text-decoration:none; }
</style>
</head>
<body>
<br><br><br>
<a href="#" class="btn">Нажми меня!</a>
</body>
</html>