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

14.09.2009   |  

HTML / CSS   |  

Комментарии (5)

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

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

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

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

Шаг 1: HTML код

<a class="button" href="#">
<span class="add">Добавить</span>
</a>

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

фон css кнопки

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

<a class="button" href="#">
<span class="add">Добавить</span>
</a>
 
<a class="button" href="#">
<span class="delete">Удалить</span>
</a>

Шаг 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;
}

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

Интересные статьи:

  1. Green 18.09.2009 01:48

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

  2. FeraS 21.09.2009 19:11

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

  3. deco90 26.09.2009 14:07

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

  4. Максим 18.02.2010 21:37

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

  5. Spirit 10.08.2010 19:51

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

Оставь свое мнение:




Подпишись на обновление блога