Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

CSS → Быстрый способ украсить кнопку

Я полагаю, у вас было по крайней мере один раз, когда вы хотите добавить более привлекательным для стиля для кнопки ввода в HTML и в этот момент вы не знали, как.
Мы все знаем, как скучно выглядит кнопка входа, когда мы используем её без стиля, и поэтому сегодня я покажу вам способ как быстро избавиться от этого старого и нудного стиля.
Быстрый способ украсить кнопку

Для начала вот как выглядит обычная кнопка:
Быстрый способ украсить кнопку


Сейчас мы рассмотрим 2 варианта оформления.

1.Только с помощью CSS без фонового изображения

Сначала добавьте класс или идентификатор вашей кнопки. Для этого урока мы добавим ID, потому что мы не намерены использовать этот вид кнопки несколько раз в страницы

Теперь давайте добавим некоторые стили для ID
#btn
{
  border: 1px solid #777777;
  background: #6e9e2d;
  color: white;
  font: bold 11px 'Trebuchet MS';
  padding: 4px;
  cursor: pointer;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

Наша кнопка имеет вид:
Быстрый способ украсить кнопку


2.Только с помощью CSS и фонового изображения

Быстрый способ украсить кнопку


Скачать исходник фона: btn.rar [14,65 Kb] (cкачиваний: 164)

ну и код выглядит у нас вот так:
#btn
{
  background: url(test-button-2.png);
  cursor: pointer;
  width: 78px;
  height: 28px;
  display: block;
  border: none;
}


Удачи, делайте свои интерфейсы красивей!
Опубликовал dimas_ua, 17-02-2011, 00:00 Комментариев: 0
 (голосов: 1)