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

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

ОБСУЖДЕНИЕ

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

пак кнопок
Просмотров: 1525  Скачан: 292 раз  Комментариев в теме: 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

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

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

Оригинальные кнопки на css3, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....

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

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

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

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

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

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

Pack кнопок 2, в паке представлены 20 кнопок на css3 с разными иконками....

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

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

Сборка кнопок #2 на css3Сборка кнопок #2 на css3

В сборку вошли 12 неплохих кнопок на css. Кнопки работают в браузерах OPERA, Firefox, Chrome, IE....

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Шаблон EnvisionШаблон Envision

Качественный HTML шаблон Envision, на главной странице располагается красивый слайдер, есть галерея, контактная форма, табы, набор кнопок......

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

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

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

Страницы: 1

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


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