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

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

ОБСУЖДЕНИЕ

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

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

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

Неплохая социальная панель, при наведении курсора мыши, панель, плавно раскрывается, за тем уже видны сами иконки....

Социальная панель на css3Социальная панель на css3

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели, ...

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

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

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

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

Социальное меню с подписью на css3Социальное меню с подписью на css3

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

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

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

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....
Интересные публикации:

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

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

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

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

Форма регистрации html с валидациейФорма регистрации html с валидацией

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы, в данном примере......

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

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

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....

Горизонтальное меню в стиле AppleГоризонтальное меню в стиле Apple

Меню в стиле Apple, созданное полностью на css3.

Горизонтальное меню с ползункомГоризонтальное меню с ползунком

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

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

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

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


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