Красивые CSS кнопки с иконками

14 сентября 2009 года, Размещено в категории: HTML / CSS

Красивые CSS кнопки

Как сделать красивые CSS кнопки?
Это очень просто, нужно установить в CSS кнопку иконку которая вызвала бы ассоциации, со страницей на которую ведет кнопка (ссылка). Я вообще люблю простой и чистый дизайн, который будет приятный и привлекательный для посетителя.

Вот Выкладываю уже готовый к использованию исходный код. Вам остается только скачать и использовать на своих сайтах.

Шаг 1: HTML код

Добавить

Свойства класса для тега SPAN равна CSS классу, который содержится в CSS, а именно фон неподвижной иконки, которую вы хотите установить в кнопку:

Вот как будет смотрится HTML код двух красивых CSS кнопок:


Добавить



Удалить

Шаг 2: CSS код
Этот код CSS для самой кнопки, который включает в себя фон кнопки и как кнопка выглядит (шрифт, ширина, высота ...):

a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}

.. а теперь мы подключаем сами иконки, для каждой иконки отдельный класс (. add. delete. user):

.add{
background:url(img/add.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.delete{
background:url(img/delete.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.user{
background:url(img/user.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}

Кажется ничего тяжелого нет, если где-то непонятно пишите в комментарии.

Мой блог находят по следующим фразам
• как сделать анимированный прогресс бар css
• плеер для сайта
• Крутой фон
• dicim.net
• почитать коментарии кто сколько заработал за смешное видео в ютубе
• flash player для сайта

Интересно будет почитать:

9 комментариев

Green

11 лет назад Ответить

Спасибо за интересную технику CSS, возможно пригодится…
FeraS

11 лет назад Ответить

Спасибо. Возьму на вооружение.
deco90

11 лет назад Ответить

Отличная подборка, мне понравилась…
Максим

11 лет назад Ответить

Здравствуйте. Извините за глупые вопросы, я новичёк.
Код кнопки я знаю куда вставлять, а вот куда вставлять код CSS и как их связать вместе?
Опишите пожалуйста установку от а до я в сайт на движке DLE.
Spirit

10 лет назад Ответить

Удобно, что с иконками сразу, спасибо.
Киска

10 лет назад Ответить

Спасибо. Это как раз то что я искала. Буду делать кнопочки
Артем

10 лет назад Ответить

Мне понравилось, сделаю для своего сайта такие же
саша

10 лет назад Ответить

Написано просто и доступно , и именно то что хотел) Спасибо!
Андрей

8 лет назад Ответить

Автор молодец!
Классные кнопки.