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

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

ОБСУЖДЕНИЕ

Анимационные кнопки css3

Анимационные кнопки css3
Просмотров: 1868  Скачан: 252 раз  Комментариев в теме: 0

Неплохие анимационные кнопки на css для сайта. Вам дано на выбор 30 готовых примеров с css3 трансформацией. Кнопки будут корректно работать только в браузерах, которые поддерживают css3.

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

 

HTML

<div class="container">
    <section class="color-1">
        <p>
            <button class="btn btn-1 btn-1a">Кнопка</button>
            <button class="btn btn-1 btn-1b">Кнопка</button>
            <button class="btn btn-1 btn-1c">Кнопка</button>
        </p>
        <p>
            <button class="btn btn-1 btn-1d">Кнопка</button>
            <button class="btn btn-1 btn-1e">Кнопка</button>
            <button class="btn btn-1 btn-1f">Кнопка</button>
        </p>
    </section>
    <section class="color-2">
        <p>
            <button class="btn btn-2 btn-2a">Кнопка</button>
            <button class="btn btn-2 btn-2b">Кнопка</button>
        </p>
        <p>
            <button class="btn btn-2 btn-2c">Кнопка</button>
            <button class="btn btn-2 btn-2d">Кнопка</button>
        </p>
        <p>
            <button class="btn btn-2 btn-2e">Кнопка</button>
            <button class="btn btn-2 btn-2f">Кнопка</button>
        </p>
        <p>
            <button class="btn btn-2 btn-2g">Кнопка</button>
            <button class="btn btn-2 btn-2h">Кнопка</button>
        </p>
        <p>
            <button class="btn btn-2 btn-2i">Да</button>
            <button class="btn btn-2 btn-2j">Нет</button>
        </p>
    </section>
    <section class="color-3">
        <p>
            <button class="btn btn-3 btn-3a icon-cart">В корзину</button>
            <button class="btn btn-3 btn-3b icon-star-2">Закладки</button>
        </p>
        <p>
            <button class="btn btn-3 btn-3c icon-heart-2">Избранное</button>
        </p>
        <p>
            <button class="btn btn-3 btn-3d icon-cog">Настройки</button>
            <button class="btn btn-3 btn-3e icon-arrow-right">Отправить</button>
        </p>
    </section>
    <section class="color-4">
        <p>
            <button class="btn btn-4 btn-4a icon-arrow-right">Возобновить</button>
            <button class="btn btn-4 btn-4b icon-arrow-left">Вернуться</button>
        </p>
        <p>
            <button class="btn btn-4 btn-4c icon-arrow-right">Возобновить</button>
            <button class="btn btn-4 btn-4d icon-arrow-left">Вернуться</button>
        </p>
    </section>
    <section class="color-5">
        <p>
            <button class="btn btn-5 btn-5a icon-cart"><span>В корзину</span></button>
            <button class="btn btn-5 btn-5a icon-remove"><span>Удалить</span></button>
            <button class="btn btn-5 btn-5a icon-cog"><span>Настройик</span></button>
        </p>
        <p>
            <button class="btn btn-5 btn-5b icon-cart"><span>В корзину</span></button>
            <button class="btn btn-5 btn-5b icon-remove"><span>Удалить</span></button>
            <button class="btn btn-5 btn-5b icon-cog"><span>Настройки</span></button>
        </p>
    </section>
    <section class="color-6">
        <p>
            <button class="btn btn-6 btn-6a">Кнопка</button>
            <button class="btn btn-6 btn-6b">Кнопка</button>
            <button class="btn btn-6 btn-6c">Кнопка</button>
        </p>
        <p>
            <button class="btn btn-6 btn-6d">Кнопка</button>
            <button class="btn btn-6 btn-6e">Кнопка</button>
            <button class="btn btn-6 btn-6f">Кнопка</button>
        </p>
        <p>
            <button class="btn btn-6 btn-6g">Кнопка</button>
            <button class="btn btn-6 btn-6h">Кнопка</button>
            <button class="btn btn-6 btn-6i">Кнопка</button>
        </p>
        <p>
            <button class="btn btn-6 btn-6j">Кнопка</button>
            <button class="btn btn-6 btn-6k">Кнопка</button>
            <button class="btn btn-6 btn-6l">Кнопка</button>
        </p>
    </section>
    <section class="color-7" id="btn-click">
        <p class="text">Нажмите на кнопку, чтобы увидеть эффект:</p>
        <p>
            <button class="btn btn-7 btn-7a icon-truck">Заказать</button>
            <button class="btn btn-7 btn-7b icon-envelope">Отправить сообщение</button>
        </p>
        <p>
            <button class="btn btn-7 btn-7c btn-icon-only icon-arrow-right">Отправить</button>
            <button class="btn btn-7 btn-7d btn-icon-only icon-remove">Удалить</button>
        </p>
        <p>
            <button class="btn btn-7 btn-7e btn-icon-only icon-heart">Нравиться</button>
            <button class="btn btn-7 btn-7f btn-icon-only icon-star">Избранное</button>
            <button class="btn btn-7 btn-7g btn-icon-only icon-plus">Добавить</button>
        </p>
        <p>
            <button class="btn btn-7 btn-7h icon-envelope">Отправить</button>
            <button class="btn btn-7 btn-7h icon-envelope">Отправить</button>
        </p>
        <div id="trash-effect" class="trash-effect">
            <button class="btn btn-7 btn-7i btn-icon-only icon-remove-2">Удалить</button>
            <div class="icon-file"></div>
            <div class="icon-file"></div>
            <div class="icon-file"></div>
        </div>
    </section>
    <section class="color-8">
        <p class="perspective">
            <button class="btn btn-8 btn-8a">3D Кнопка</button>
        </p>
        <p class="perspective">
            <button class="btn btn-8 btn-8b">3D Кнопка</button>
        </p>
        <br />
        <p class="perspective">
            <button class="btn btn-8 btn-8c">3D Кнопка</button>
        </p>
        <p class="perspective">
            <button class="btn btn-8 btn-8d">3D Кнопка</button>
        </p>
        <p class="text">Нажмите на кнопку, чтобы увидеть эффект:</p>
        <p class="perspective">
            <button class="btn btn-8 btn-8e">3D Кнопка</button>
        </p>
        <p class="perspective">
            <button class="btn btn-8 btn-8f">3D Кнопка</button>
        </p>
        <br />
        <p class="perspective">
            <button class="btn btn-8 btn-8g">3D Кнопка</button>
        </p>
        <p class="perspective">
            <button class="btn btn-8 btn-8g">3D Кнопка</button>
        </p>
    </section>
</div>

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

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript">
var buttons7Click = Array.prototype.slice.call( document.querySelectorAll( '#btn-click button' ) ),
    buttons9Click = Array.prototype.slice.call( document.querySelectorAll( 'button.btn-8g' ) ),
    totalКнопкаs7Click = buttons7Click.length,
    totalКнопкаs9Click = buttons9Click.length;
    buttons7Click.forEach( function( el, i ) { el.addEventListener( 'click', activate, false ); } );
    buttons9Click.forEach( function( el, i ) { el.addEventListener( 'click', activate, false ); } );
    function activate() {
        var self = this, activatedClass = 'btn-activated';
        if( classie.has( this, 'btn-7h' ) ) {
            activatedClass = buttons7Click.indexOf( this ) === totalКнопкаs7Click-2 ? 'btn-error' : 'btn-success';
        }
        else if( classie.has( this, 'btn-8g' ) ) {
            activatedClass = buttons9Click.indexOf( this ) === totalКнопкаs9Click-2 ? 'btn-success3d' : 'btn-error3d';
        }
        if( !classie.has( this, activatedClass ) ) {
            classie.add( this, activatedClass );
            setTimeout( function() { classie.remove( self, activatedClass ) }, 1000 );
        }
    }
    document.querySelector( '.btn-7i' ).addEventListener( 'click', function() {
        classie.add( document.querySelector( '#trash-effect' ), 'trash-effect-active' );
    }, false );
</script>
Материалы по теме:

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

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

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

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

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

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

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

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

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

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

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

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

Оригинальные кнопки на cssОригинальные кнопки на css

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....
Интересные публикации:

3D плакат с анимацией на чистом css33D плакат с анимацией на чистом css3

3D анимация на чистом css3, добиться такого эффекта удаётся с помощью свойства -webkit-perspective....

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

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

Скрипт почтовой рассылки писем SendMailСкрипт почтовой рассылки писем

SendMail - это инструмент для организации рассылки почтовых сообщений с вашего сайта любой информации и включает в себя всё то, что нужно email-маркет...

BuddyBuddy

Buddy - это современный, отвечающий всем требованиям шаблон для WordPress с полной интеграцией и поддержкой BuddyPress....

Мульти слайдер с подпунктами «Multi-Item Slider»Мульти слайдер с подпунктами «Multi-Item...

Стильный мульти слайдер с красивым эффектом, отлично подойдёт для интернет магазина, несомненно идея при создании этого слайдера, была взята в Aplle.....

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

Jquery меню горизонтальноеJquery меню горизонтальное с анимированн...

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

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

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

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


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