qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Кнопоки с иконками на CSS

Кнопки с иконками на CSS
Просмотров: 2519  Скачан: 264 раз  Комментариев в теме: 0

Кнопки с иконками для вашего сайта, в паке представлены 20 кнопок на css с разными иконками. Кнопки работают во всех современных браузерах.

Шаг 1 - создание разметки

 

HTML

<div class="brn">
    <a href="#" class="button">Button</a>
    <a href="#" class="button add">Add</a>
    <a href="#" class="button edit">Edit</a>
    <a href="#" class="button delete">Delete</a>
    <a href="#" class="button save">Save</a>
    <a href="#" class="button email">Send email</a>
    <a href="#" class="button like">Like</a>
    <a href="#" class="button next">Next</a>
    <a href="#" class="button star">Favourite</a>
    <a href="#" class="button spark">Spark</a>
    <a href="#" class="button play">Play</a>
    <a href="#" class="button tw">Follow me</a>
    <a href="#" class="button fb">Become a fan</a>
    <a href="#" class="button">Clean button</a>
    <a href="#" class="button save">Button with icon</a>
    <a href="#" class="button" disabled>Disabled button</a>
    <a href="#" class="button save" disabled>Another disabled button</a>
    <a href="#" class="button submit">Input submit</a>
    <a href="#" class="button button">Input button</a>
    <a href="#" class="button submit" disabled>Input submit disabled</a>
    <a href="#" class="button button" disabled>Input button disabled</a>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />
Материалы по теме:

Сборка социальных кнопок на css3Сборка социальных кнопок на css3

Неплохая сборка социальных кнопок на css3, к кнопкам применён иконический шрифт....

Оригинальные кнопки на cssОригинальные кнопки на css

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансфор...

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

Pack кнопок на CSS3Pack кнопок на CSS3

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....

Кнопка с анимацией на css3Кнопка с анимацией на css3

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......
Интересные публикации:

Оригинальное горизонтальное менюОригинальное горизонтальное меню

Красивое горизонтальное меню в оригинальном стиле, в меню используется большое количество позиций......

Галерея на jQueryГалерея на jQuery

В галерее используется потрясающий эффект раскрытия картинки, когда вы нажимаете на картинку, она как бы собирается по......

ChromeGTChromeGT

Оригинальный html шаблон ChromeGT имеющий 5 цветовых стилей, галерею с миниатюрами, красивый слайдер в трёх видах (изображения, контент, 3D (Flash), с...

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

Неплохая социальная панель, при наведении курсора мыши, панель, плавно раскрывается, за тем уже видны сами иконки....

Вкладки контента css3Вкладки контента css3

Красивые вкладки контента реализованные с помощью css3...

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid accordi...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде слайде...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 7 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить