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

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

ОБСУЖДЕНИЕ

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

Анимационные кнопки css3
Просмотров: 1537  Скачан: 234 раз  Комментариев в теме: 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, при наведении на иконку, она плавно прокручивается, одновременно с анимацией иконки, плавно появляется подпись....

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

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

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

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

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

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

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

Сборка кнопок на cssСборка кнопок на css

Лёгкая подборка кнопок на css, в подборку вошли восемь разных кнопок созданных с помощью css....

Блок на CSS3 c эффектом 3D трансформацииБлок на CSS3 c эффектом 3D трансфор...

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

JourneyJourney

Шаблон Journey построенный на HTML5, в шаблоне имеется слайдер, стрелка вверх, табы, галерея, контактная форма с Google Maps....

The RockThe Rock

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

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

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

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews 2.0»

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Sooshal v2.4Sooshal v2.4

Sooshal - это первая в режиме реального времени, социальная и не социальная медиа поисковая система, которая использует новейшие данные с помощью 10 р...

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

Выпадающее мульти меню, как вариант вывода безграничного количества пунктов....

Cumico v1.4Cumico v1.4

Универсальная премиум тема для WordPress с адаптивной вёрсткой и стильным дизайном. Возможность подключить Woocommerce это идеальное решение для......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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