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

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

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

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

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

скачать таблицу спецсимволов

Шаг 1: HTML код


Добавить

Свойства класса для тега SPAN равна CSS классу, который содержится в 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 комментариев

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

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

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

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

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

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

  • 7 лет назад Ответить

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

  • 7 лет назад Ответить

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

  • 7 лет назад Ответить

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

  • 7 лет назад Ответить

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: