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