Создаем красиве Css кнопки для сайта

27-02-2010

В этом уроке мы расмотрим пример создания простых кнопок на Css и Html без Javascriptа. В простом чистом стиле ну а выглядеть они будут вот так вот:

Красивые Сss кнопки
А вот вам и демо версия этих кнопок кликните на ссылку чтобы перейти на страницу с кнопками
demo

Шаг 1: Html код

Мы будем использовать эту простую структуру: тэг span внутри ссылки a вот и код:


Добавить в заклвдки

Вы можете использовать эту структро для всех кнопок которые вы хотите добавить на страницу

где тэг <a> является контейнером кнопки

а свойство span class равняется 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{
background:url(img/add.ico) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.delete{
background:url(img/delete.ico) no-repeat 10px 8px;
text-indent:30px;
display:block;
}
.user{
background:url(img/user.ico) no-repeat 10px 8px;
text-indent:30px;
display:block;
}

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

Алматинский полубомж3.14.2010 04:03
Урок неплохой только есть одна проблема. Заходил чтобы посмотреть ДЕМО кнопок и с Оперы и Мозиллы, вместо букв - знаки вопроса.
admin3.14.2010 05:03
Кому:Алматинский полубомж,  Да это когда по ftp текстовые файлы переносишь он кирилицу на такую хрень меняет щя исправлю
    Алексей12.7.2011 05:12
    Конечно не по теме, но не подскажите, как у вас на сайте реализованы закругления блоков с кодом? Я код посмотрел, не понял... Закругления вроде бы рисуются (картинки с закругленными уголками не нашел в загрузке), и в опере все нормально - а я как не пытаюсь сделать закругления контейнера div - везде кроме оперы (ну еще и IE) закругляет, а с оперой вообще никак... Мне очень интересно как вы решили эту проблему!!! Заранее спасибо! p.s.: не сочтите за троллинг...
      dzantiev12.7.2011 06:12
      Это делается с помощю CSS3, есть такой атрибут как border-radius:<радиус закругления>. Будет работать везде кроме старых браузеров. Но для них придумали PIE http://css3pie.com/
ОСТАВИТЬ КОММЕНТАРИЙ