Красивые CSS кнопки с иконками
14 сентября 2009 года, Размещено в категории: HTML / 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 для сайта
10 лет назад
Спасибо за интересную технику CSS, возможно пригодится…
10 лет назад
Спасибо. Возьму на вооружение.
10 лет назад
Отличная подборка, мне понравилась…
Максим
10 лет назад
Здравствуйте. Извините за глупые вопросы, я новичёк.
Код кнопки я знаю куда вставлять, а вот куда вставлять код CSS и как их связать вместе?
Опишите пожалуйста установку от а до я в сайт на движке DLE.
9 лет назад
Удобно, что с иконками сразу, спасибо.
9 лет назад
Спасибо. Это как раз то что я искала. Буду делать кнопочки
9 лет назад
Мне понравилось, сделаю для своего сайта такие же
саша
9 лет назад
Написано просто и доступно , и именно то что хотел) Спасибо!
7 лет назад
Автор молодец!
Классные кнопки.