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

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

ОБСУЖДЕНИЕ

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

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

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

Mega Web Buttons PackMega Web Buttons Pack

Mega Pack кнопок на css, в паке собрано около 40-ка кнопок с разными иконками....

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

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

Набор пиктограммных кнопок на css3Набор пиктограммных кнопок на css3

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на ...

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

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

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

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

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......
Интересные публикации:

Горизонтальное LavaLamp менюГоризонтальное LavaLamp меню

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

Круговой слайдерКруговой слайдер css3

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

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

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

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

Games ThemeGames Theme

GamesTheme - мощная игровая тема для WordPress, в тёмном оформлении, тема полностью кроссбраузерная, seo оптимизированная......

Текстовый слайдерТекстовый слайдер

Простой текстовый слайдер с прокруткой влево, вправо, не плохо подойдёт для вывода кратких новостей. Имеется три вида слайдера...

Набор элементов дизайна «CSS3 Responsive Forms Pack»Набор элементов дизайна «CSS3 Responsive...

Это профессиональный набор элементов дизайна ( кнопки, формы, Checkbox и многое другое)....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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