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

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

ОБСУЖДЕНИЕ

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

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

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

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

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

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

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

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

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

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......

Mega Web Buttons PackMega Web Buttons Pack

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

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

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

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

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

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

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

ElliotElliot

Неплохой html шаблон.сделанный с уклоном на вывод изображения, имеется два стиля (светлый и тёмный), на главной странице расположена карусель......

Horse ClubHorse Club

Лёгкий html шаблон в тёмных тонах, посвящённый верховой езде и всему что с этим связано. В шаблоне имеется красивый слайдер и галерея......

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

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

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

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

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


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