Красивая кнопка на CSS

Всем привет!

Задача - сделать красивую кнопку на CSS

Итак приступим:

Обычная кнопка:

Код:

<
input 
 
type="submit" name="Submit" class="btn-exit" value="Выйти"

 />

Как выглядит :

Для того что-бы сделать ее красивой (допустим наложим градиент и добавим тени) - воспользуемся стилями css.

Для этого назначим класс кнопке (btn-exit) и применим к нему стиль

<
style type="text/css">

.btn-exit, input[type="submit"]{

background-image: linear-gradient(rgb(144, 66, 163), rgb(79, 25, 53));

border-bottom-left-radius: 6px;

border-bottom-right-radius: 6px;

border-bottom-style: solid;

border-bottom-width: 1px;

border-left-color: rgb(204, 204, 204);

border-left-style: solid;

border-left-width: 1px;

border-right-color: rgb(204, 204, 204);

border-right-style: solid;

border-right-width: 1px;

border-top-color: rgb(204, 204, 204);

border-top-left-radius: 6px;

border-top-right-radius: 6px;

border-top-style: solid;

border-top-width: 1px;

box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.0470588) 0px 1px 2px 0px;

font-size: 16px;

font-weight: normal;

height: 42px;

letter-spacing: normal;

line-height: 18px;

padding-bottom: 11px;

padding-left: 19px;

padding-right: 19px;

padding-top: 11px;

text-transform: none;

}

<
/style>

Кнопка с классом и стилями будет выглядеть так:

не забываем про событие hover (стиль когда наводи мышкой на кнопку)

Для этого дописываем событие к стилю

<
style type="text/css">

.btn-exit:hover {

   background: #de7037;

   color: #fff;

}

<
/style>

Кнопка с классом, стилями и hover будет выглядеть так:

Вот и все готово - можно конечно поэкспериментировать, но это уже дело каждого.