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

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

ОБСУЖДЕНИЕ

Пак кнопок с иконками

пак кнопок
Просмотров: 2285  Скачан: 342 раз  Комментариев в теме: 1

Большой пак отличных кнопок с иконками на css для вашего сайта, в паке собрано около 40-ка кнопок с разными иконками, выглядят кнопки довольно красиво. Кнопки работают в браузерах Opera, Firefox, Chrome, в ранних версиях IE кнопки отображаются неправильно.

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

 

HTML

<div class="box">
    <a href="#" class="btn activity">Activity</a>
    <a href="#" class="btn activitya">Add activity</a>
    <a href="#" class="btn activityd">Delete activity</a>
    <a href="#" class="btn activityw">Activity warning</a>
    <a href="#" class="btn add">Add</a>
    <a href="#" class="btn address">Address book</a>
    <a href="#" class="btn addressd">Delete address</a>
    <a href="#" class="btn addresss">Search for address</a>
    <a href="#" class="btn addressa">Add address</a>
    <a href="#" class="btn book">Bookmarks</a>
    <a href="#" class="btn booka">Add bookmark</a>
    <a href="#" class="btn bookd">Delete bookmark</a>
    <a href="#" class="btn books">Search for bookmarks</a>
    <a href="#" class="btn bulb">Bulb</a>
    <a href="#" class="btn chart">Chart</a>
    <a href="#" class="btn comment">Comments</a>
    <a href="#" class="btn commenta">Add comment</a>
    <a href="#" class="btn commentua">Add user comment</a>
    <a href="#" class="btn commentud">Delete user comment</a>
    <a href="#" class="btn commentus">Search for user comment</a>
    <a href="#" class="btn delete">Delete</a>
    <a href="#" class="btn edit">Edit</a>
    <a href="#" class="btn email">Message</a>
    <a href="#" class="btn emaila">Add message</a>
    <a href="#" class="btn emaild">Delete message</a>
    <a href="#" class="btn fav">Favourite</a>
    <a href="#" class="btn folder">Folder</a>
    <a href="#" class="btn foldera">Add folder</a>
    <a href="#" class="btn folderd">Delete folder</a>
    <a href="#" class="btn info">Info</a>
    <a href="#" class="btn lock">Lock</a>
    <a href="#" class="btn unlock">Lock open</a>
    <a href="#" class="btn page">Document</a>
    <a href="#" class="btn pagea">Add document</a>
    <a href="#" class="btn paged">Delete document</a>
    <a href="#" class="btn rss">RSS</a>
    <a href="#" class="btn search">Search</a>
    <a href="#" class="btn time">Time</a>
    <a href="#" class="btn user">Users</a>
    <a href="#" class="btn usera">Add user</a>
    <a href="#" class="btn userd">Delete user</a>
    <a href="#" class="btn users">Search for user</a>
    <a href="#" class="btn useri">More about user</a>
    <a href="#" class="btn warn">Warning</a>
</div>

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

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-2.0.1.js"></script>
<script type="text/javascript">
$(function(){ 
    $('.btn').append($('<span />'));
});
</script>
Материалы по теме:

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

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

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

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....

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

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

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

Неплохие кнопки для вашего сайта на css3, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....

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

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

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

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

MCUBE SolutionsMCUBE Solutions

HTML шаблон MCUBE Solutions хорошо подойдёт для сайта в сфере бизнеса, в шаблоне используется flash слайдер, который......

JQuery слайдер - JliderJQuery слайдер - Jlider

Jlider - это компактный слайдер на JQuery с весьма богатым набором настроек....

Оригинальная анимационная контактная формаОригинальная анимационная контактная фор...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

Скроллер картинокСкроллер картинок

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

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

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

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

Комментариев в теме: (1)
↑ 0 ↓
ANDREW
Красивые иконки, понравились беру))
Ответить Ответ с цитатой

Страницы: 1

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


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