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

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

ОБСУЖДЕНИЕ

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

Кнопки с анимацией на css
Просмотров: 1622  Скачан: 244 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="back">
    <div class="button_base b01_simple_rollover">Кнопка</div>
</div>
<div class="back">
    <div class="button_base b02_slide_in">
        <div>Кнопка</div>
        <div></div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b03_skewed_slide_in">
        <div>Кнопка</div>
        <div></div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b04_3d_tick">
        <div>Кнопка</div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b05_3d_roll">
        <div>Кнопка</div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b06_3d_swap">
        <div>Кнопка</div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b07_3d_double_roll">
        <div>Кнопка</div>
        <div>Кнопка</div>
        <div>Кнопка</div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b08_3d_pushback">
        <div>Кнопка</div>
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b09_electric">Кнопка</div>
</div>
<div class="back">
    <div class="button_base b10_tveffect">
        <div>Кнопка</div>
        <div>
            <div>Кнопка</div>
            <div>Кнопка</div>
            <div>Кнопка</div>
        </div>
    </div>
</div>
<div class="back">
    <div class="button_base b11_3d_jumpback">
        <div>Кнопка</div>
    </div>
</div>
<div class="back">
    <div class="button_base b12_3d_glitch">
        <div></div>
        <div>Кнопка</div>
    </div>
</div>

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

 

CSS

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

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

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

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

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

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

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

Кнопки с градиентом на css3Кнопки с градиентом на css3

Кнопки с градиентом, такие кнопки можно встретить довольно часто......

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

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

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

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

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....
Интересные публикации:

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бумаги

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

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

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

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

Super Changer v2.1Super Changer v2.1

SuperChanger - это адаптивный журнальный шаблон для wordpress. Основным преимуществом шаблона является разнообразие цветовых стилей оформления......

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

Неплохая социальная панель, при наведении курсора мыши, панель, плавно раскрывается, за тем уже видны сами иконки....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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