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

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

ОБСУЖДЕНИЕ

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

Подборка кнопок
Просмотров: 1590  Скачан: 186 раз  Комментариев в теме: 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, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

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

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

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

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

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

Красивые кнопки на css3Красивые кнопки на css3

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

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

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

Mega Web Buttons PackMega Web Buttons Pack

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

Sngine v1.6 и v1.8Sngine v1.6 и v1.8

Sngine - это движок социальной платформы, с помощью его вы можете создать социальный сайт или же онлайн сообщество....

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi-Item...

Стильный мульти слайдер с красивым эффектом, отлично подойдёт для интернет магазина, несомненно идея при создании этого слайдера, была взята в Aplle.....

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

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

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

Горизонтальное меню с выдвигающимися иконкамиГоризонтальное меню с выдвигающимися ико...

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

Оригинальная анимационная контактная формаОригинальная анимационная контактная фор...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

Горизонтальное выпадающее меню с помощью jqueryГоризонтальное выпадающее меню с помощью...

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

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

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

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


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