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

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

ОБСУЖДЕНИЕ

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

Кнопки с анимацией на css
Просмотров: 1385  Скачан: 218 раз  Комментариев в теме: 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" />
Материалы по теме:

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

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

VIP кнопка на css3VIP кнопка на css3

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

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

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

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

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

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

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

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

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

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

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

VIP кнопка на css3VIP кнопка на css3

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

GridoGrido

Много функциональный шаблон Grido, шаблон обладает огромным набором возможностей его настройки....

Вертикальное разноцветное меню на css3Вертикальное разноцветное меню на css3

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

FolderFolder

Универсальный html шаблон Folder, на главной странице располагается слайдер с миниатюрами и комментариями к изображению, есть галерея......

Exterior DesignExterior Design

Неплохой html шаблон с готовым набором страниц, на главной странице расположено два слайдера, имеется портфолио, контактная форма......

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню на css...

Горизонтальное меню на css3 с замечательным эффектом....

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

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

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

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

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


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