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

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

ОБСУЖДЕНИЕ

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

Анимационные кнопки css3
Просмотров: 1577  Скачан: 237 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

Набор градиентных кнопок на css3Набор градиентных кнопок на css3

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

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......

Сборка кнопок #2 на css3Сборка кнопок #2 на css3

В сборку вошли 12 неплохих кнопок на css. Кнопки работают в браузерах OPERA, Firefox, Chrome, IE....

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

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

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

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

Горизонтальное LavaLamp менюГоризонтальное LavaLamp меню

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

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде слайде...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, JS

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...

Сборка социальных кнопок на css3Сборка социальных кнопок на css3

Неплохая сборка социальных кнопок на css3, к кнопкам применён иконический шрифт....

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

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

Rotator на css и jQueryRotator на css и jQuery

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

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

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

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


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