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

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

ОБСУЖДЕНИЕ

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

Анимационные кнопки css3
Просмотров: 1483  Скачан: 230 раз  Комментариев в теме: 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 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансфор...

Блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида....

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

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

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

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

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

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

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

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

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

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

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

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

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

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

MinimoSity v1.1MinimoSity v1.1

Minimosity - стильная тема для wordpress, отлично подойдёт для сайта новостной и журнальной тематики....

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

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

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

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

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

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

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

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


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