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

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

ОБСУЖДЕНИЕ

Подборка кнопок для сайта

Подборка кнопок
Просмотров: 1911  Скачан: 205 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="cont">
    <ul>
        <li><a href="#" class="button button-rounded button-flat">press me</a></li>
        <li><a href="#" class="button button-rounded button-flat-primary">press me</a></li>
        <li><a href="#" class="button button-rounded button-flat-action">press me</a></li>
        <li><a href="#" class="button button-rounded button-flat-highlight">press me</a></li>
        <li><a href="#" class="button button-rounded button-flat-caution">press me</a></li>
        <li><a href="#" class="button button-rounded button-flat-royal">press me</a></li>
    </ul>

    <ul>
        <li><a href="#" class="button button-pill button-flat">press me</a></li>
        <li><a href="#" class="button button-pill button-flat-primary">press me</a></li>
        <li><a href="#" class="button button-pill button-flat-action">press me</a></li>
        <li><a href="#" class="button button-pill button-flat-highlight">press me</a></li>
        <li><a href="#" class="button button-pill button-flat-caution">press me</a></li>
        <li><a href="#" class="button button-pill button-flat-royal">press me</a></li>
    </ul>

    <ul>
        <li><a href="#" class="button button-flat">press me</a></li>
        <li><a href="#" class="button button-flat-primary">press me</a></li>
        <li><a href="#" class="button button-flat-action">press me</a></li>
        <li><a href="#" class="button button-flat-highlight">press me</a></li>
        <li><a href="#" class="button button-flat-caution">press me</a></li>
        <li><a href="#" class="button button-flat-royal">press me</a></li>
    </ul>

    <ul>
        <li><a href="#" class="button button-rounded button-flat"><i class="icon-github"></i> press me</a></li>
        <li><a href="#" class="button button-rounded button-flat-primary"><i class="icon-refresh"></i> press me</a></li>
        <li><a href="#" class="button button-rounded button-flat-action"><i class="icon-cloud"></i> press me</a></li>
        <li><a href="#" class="button button-rounded button-flat-highlight"><i class="icon-camera"></i> press me</a></li>
        <li><a href="#" class="button button-rounded button-flat-caution"><i class="icon-code"></i> press me</a></li>
        <li><a href="#" class="button button-rounded button-flat-royal"><i class="icon-envelope-alt"></i> press me</a></li>
    </ul>

    <ul>
        <li><a href="#" class="button glow button-rounded button-flat">press me</a></li>
        <li><a href="#" class="button glow button-rounded button-flat-primary">press me</a></li>
        <li><a href="#" class="button glow button-rounded button-flat-action">press me</a></li>
        <li><a href="#" class="button glow button-rounded button-flat-highlight">press me</a></li>
        <li><a href="#" class="button glow button-rounded button-flat-caution">press me</a></li>
        <li><a href="#" class="button glow button-rounded button-flat-royal">press me</a></li>
    </ul>

    <ul>
        <li><a href="#" class="button button-rounded">press me</a></li>
        <li><a href="#" class="button button-rounded button-primary">press me</a></li>
        <li><a href="#" class="button button-rounded button-action">press me</a></li>
        <li><a href="#" class="button button-rounded button-highlight">press me</a></li>
        <li><a href="#" class="button button-rounded button-caution">press me</a></li>
        <li><a href="#" class="button button-rounded button-royal">press me</a></li>
    </ul>

    <ul>
        <li><a href="#" class="button button-pill">press me</a></li>
        <li><a href="#" class="button button-pill button-primary">press me</a></li>
        <li><a href="#" class="button button-pill button-action">press me</a></li>
        <li><a href="#" class="button button-pill button-highlight">press me</a></li>
        <li><a href="#" class="button button-pill button-caution">press me</a></li>
        <li><a href="#" class="button button-pill button-royal">press me</a></li>
    </ul>

    <ul>
        <li><a href="#" class="button">press me</a></li>
        <li><a href="#" class="button button-primary">press me</a></li>
        <li><a href="#" class="button button-action">press me</a></li>
        <li><a href="#" class="button button-highlight">press me</a></li>
        <li><a href="#" class="button button-caution">press me</a></li>
        <li><a href="#" class="button button-royal">press me</a></li>
    </ul>

    <ul>
        <li><a href="#" class="button button-rounded button-flat-primary button-large">press me</a></li>
        <li><a href="#" class="button button-rounded button-flat-primary">press me</a></li>
        <li><a href="#" class="button button-rounded button-flat-primary button-small">press me</a></li>
        <li><a href="#" class="button button-rounded button-flat-primary button-tiny">press me</a></li>
    </ul>

    <ul>
        <li><input type="submit" value="press me" class="button button-pill button-primary"/></li>
        <li><button class="button button-pill button-primary">press me</button></li>
        <li><input  disabled type="submit"  value="press me" class="button button-pill button-primary"/></li>
        <li><button disabled class="button  button-pill button-primary">press me</button></li>
        <li><button disabled class="button button-pill button-flat-primary">press me</button></li>
        <li><a href="#" class="button disabled button-pill button-primary ">press me</a></li>
        <li><span class="button-wrap"><a href="#" class="button button-pill ">press me</a></span></li>
        <li><span class="button-wrap"><a href="#" class="button button-pill button-primary">press me</a></span></li>
    </ul>

    <div class="ddg">
    <ul>
            <li><a href="#" class="button button-circle">press me</a></li>
            <li><a href="#" class="button button-circle button-primary">press me</a></li>
            <li><a href="#" class="button button-circle button-action">press me</a></li>
            <li><a href="#" class="button button-circle button-highlight">press me</a></li>
            <li><a href="#" class="button button-circle button-caution">press me</a></li>
            <li><a href="#" class="button button-circle button-royal">press me</a></li>
        </ul>
    <ul>
            <li><a href="#" class="button button-circle button-flat">press me</a></li>
            <li><a href="#" class="button button-circle button-flat-primary">press me</a></li>
            <li><a href="#" class="button button-circle button-flat-action">press me</a></li>
            <li><a href="#" class="button button-circle button-flat-highlight">press me</a></li>
            <li><a href="#" class="button button-circle button-flat-caution">press me</a></li>
            <li><a href="#" class="button button-circle button-flat-royal">press me</a></li>
            <li><span class="button-wrap"><a href="#" class="button button-circle">press me</a></span></li>
            <li><span class="button-wrap"><a href="#" class="button button-circle button-primary">press me</a></span></li>
        </ul>
        <span class="button-wrap button-download">
            <a class="button button-circle button-flat button-flat-primary glow" href="#">Download</a>
        </span>
    </div>
</div>

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

 

CSS

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

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

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

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

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

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....

Мега cборка социальных кнопок на css +300Мега cборка социальных кнопок на cs...

Сборка +300 социальных кнопок , это 300 разных социальных кнопок созданных на css, которые без сомнения украсят любой сайт....

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

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

Mega Web Buttons PackMega Web Buttons Pack

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

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

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

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

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

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

MCUBE SolutionsMCUBE Solutions

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

Скрипт комментариев на PHPСкрипт комментариев на PHP

Скрипт комментариев написанный на php и работает в связке с MYSQL....

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......

Cumico v1.4Cumico v1.4

Универсальная премиум тема для WordPress с адаптивной вёрсткой и стильным дизайном. Возможность подключить Woocommerce это идеальное решение для......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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