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

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

ОБСУЖДЕНИЕ

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

пак кнопок
Просмотров: 1942  Скачан: 330 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

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

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

Кнопка с анимационным фоном на css3Кнопка с анимационным фоном на css3

Отличная кнопка на css3, кнопка реально классная и удобная, да и привлекает глаза посетителя....

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

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....

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

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

Кнопки с градиентом на css3Кнопки с градиентом на css3

Кнопки с градиентом, такие кнопки можно встретить довольно часто......
Интересные публикации:

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews 2.0»

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Социальные иконки на css3Социальные иконки на css3

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

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

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

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....

In Admin PanelIn Admin Panel

Неплохой html шаблон панели администратора, в наличии имеются все необходимые элементы: кнопки, закладки, меню и прочее....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

Страницы: 1

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


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