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

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

ОБСУЖДЕНИЕ

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

Подборка кнопок
Просмотров: 1786  Скачан: 202 раз  Комментариев в теме: 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" />
Материалы по теме:

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

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

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

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

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

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

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

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

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

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

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

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......
Интересные публикации:

Выпадающее меню на css3Выпадающее меню на css3

Красивое выпадающее меню с применением иконического шрифта, меню полностью на css3......

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

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

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

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

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

AirlinesAirlines

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

ConsultingConsulting

Красивый html шаблон с прекрасной графикой, иконками и меню, хорошо подойдёт для бизнес проекта, в шаблоне имеется необычный слайдер......

EbuyEbuy

Ebuy - это шаблон интернет магазина, который полюбился многим за свою простоту в использовании и надёжность....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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