Красивая кнопка на 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 будет выглядеть так:
Вот и все готово - можно конечно поэкспериментировать, но это уже дело каждого.