RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

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

Mega Web Buttons PackMega Web Buttons Pack

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

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на ...

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....

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

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

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

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

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

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

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

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

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

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

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

DecadenceDecadence

Очень красивый универсальный шаблон Decadence на историческую тему, построенный на HTML5, в шаблоне имеется выпадающее меню......

Sell v1.4.1Sell v1.4.1

Sell - это ещё одна довольно гибкая универсальная тема для создания интернет магазина на WordPress с использованием WooCommerce....

Шаблон Dual FlowШаблон Dual Flow

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть галерея, выпадающее меню, форма обратной связи с Google Maps......

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

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

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

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

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


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