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

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

ОБСУЖДЕНИЕ

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

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

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

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....

Социальное меню с подписью на css3Социальное меню с подписью на css3

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

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

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

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

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

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

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

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

Социальная панель на css3Социальная панель на css3

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели, ...
Интересные публикации:

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню на cs...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

ClockerClocker

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

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

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

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....

Инфо-сетка на css и jquery «Grid accordion»Инфо-сетка на css и jquery «Grid accordi...

Стильный аккордеон в сетку хорошо подойдёт для интернет магазина....

Cumico v1.4Cumico v1.4

Универсальная премиум тема для WordPress с адаптивной вёрсткой и стильным дизайном. Возможность подключить Woocommerce это идеальное решение для......

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

Стильное вертикальное меню аккордеон.
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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