Создание красивых кнопок с помощью css

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

Теги: Дизайн