Наконец-то удалось выбраться в интернет. Давно не писал в блоге, на это были свои причины. Но теперь я вернулся. В этом посте я покажу, как можно сделать красивые кнопки с помощью css. Эти кнопки можно использовать в меню или в формах.

Не слишком красиво. Попробуем сейчас это исправить. Для этого зададим стиль для нашей первой css кнопки.

#redButton {
    display: block;
    width: 6em;
    padding: 0.2em;
    line-height: 2.7;
    background-color: #ed0909;
    border:1px solid black;
    color: black;
    text-decoration: none;
    text-align: center;
    font-weight:bold;
}
#redButton:hover {
    background-color: #c90f0f;
    color: #fff;
    font-weight:bold;
}

Думаю, со стилем кнопки все понятно. Присваиваем свойству display значение block, задаем длину и ширину кнопки, а также цвет фона и т. д.

Теперь займемся внешним видом второй кнопки. Зададим для нее стиль.

#greenButton {
    height:35px;
    width: 6em;
    background-color: #696969;
    border:1px solid black;
    font-weight:bold;
        color:#c1e11c;
}
#greenButton:hover {
    background-color: #9ed216;
    color: #fff;
    font-weight: bold;
        cursor: pointer;
}

Как и в случае с первой кнопкой задаем фон, ширину, высоту и т. д.

Итак, подведем итоги. В этом посте я показал вам как можно сделать красивые кнопки с помощью css. Вид кнопки зависит только от вашей фантазии, вместо фона можно задать изображение, тоже неплохой вариант оформления.

Добавлено: 02 Марта 2015 20:32:51 Добавил: Андрей Ковальчук Нравится 0

Добавить