Наконец-то удалось выбраться в интернет. Давно не писал в блоге, на это были свои причины. Но теперь я вернулся. В этом посте я покажу, как можно сделать красивые кнопки с помощью 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; }
После изменения наша css кнопка будет выглядеть вот так:
ПУСК
Думаю, со стилем кнопки все понятно. Присваиваем свойству 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 кнопка будет выглядеть вот так:
Как и в случае с первой кнопкой задаем фон, ширину, высоту и т. д.
Итак, подведем итоги. В этом посте я показал вам как можно сделать красивые кнопки с помощью css. Вид кнопки зависит только от вашей фантазии, вместо фона можно задать изображение, тоже неплохой вариант оформления.
- Верстаем дизайн для блога. Часть 2
- Создание вертикального меню для сайта
- Прокачиваем таблицы с помощью CSS3
- Верстаем дизайн для блога. Часть 1
- 10 генераторов текста
Теги: Дизайн
Спасибо за наглядные примеры! Теперь у меня новая кнопочка на сайте:) СПасибо!
Reply
По вашему туториалу создал кнопку у себя на сайте:)
А вообще неплохой блог, частенько сюда захожу.
Reply