22 эффекта для кнопок после нажатия

22 Эффекта кнопок после нажатия

Всем привет! В последнее время популярным становится использование анимации на сайтах. Это хороший способ привлечь внимание и выделить сайт на фоне остальных. Бывает даже самая маленькая деталь может оставить эффект, который еще долго будешь вспоминать и думать как же он был сделан. В сегодняшней статье Вас ждет набор эффектов созданных с помощью CSS анимации эффекты для кнопок после нажатия.

Полный набор эффектов для кнопок можно посмотреть ниже:

Смотреть примерСкачать

Также рекомендую посмотреть похожие статьи на эту тему:

  • CSS анимированные всплывающие подсказки
  • Всплывающие подсказки CSS3
  • Красивая всплывающая подсказка при нажатии

HTML

Для начала подключаем между тегами &lt,head&gt, &lt,/head&gt, следующие стили (normalize.css, Font Awesome, demo.css, component.css):

HTML КОД

1 2 3 4 &lt,link rel=stylesheet type=text/css href=css/normalize.css /&gt, &lt,link rel=stylesheet type=text/css href=fonts/font-awesome-4.3.0/css/font-awesome.min.css /&gt, &lt,link rel=stylesheet type=text/css href=css/demo.css /&gt, &lt,link rel=stylesheet type=text/css href=css/component.css /&gt,

В качестве примера будем рассматривать эффект BORIS. Начнем со HTML структуры кнопок:

HTML КОД

1 2 3 4 &lt,button class=cbutton cbutton–effect-boris&gt, &lt,i class=cbutton__icon fa fa-fw fa-step-backward&gt,&lt,/i&gt, &lt,span class=cbutton__text&gt,Backward&lt,/span&gt, &lt,/button&gt,

Обычный тег кнопки &lt,button&gt, &lt,button&gt, внутри которого есть иконка.

CSS

Хотя мы уже подключили файл стилей component.css, я всё же хочу немного прокомментировать его содержимое.

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

CSS КОД

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 .cbutton position: relative, display: inline-block, margin: 1em, padding: 0, border: none, background: none, color: #286aab, font-size: 1.4em, overflow: visible, -webkit-transition: color 0.7s, transition: color 0.7s, -webkit-tap-highlight-color: rgba0, 0, 0, 0, .cbutton.cbutton–click, .cbutton:focus outline: none, color: #3c8ddc, .cbutton__icon display: block, .cbutton__text position: absolute, opacity: 0, pointer-events: none, .cbutton::after position: absolute, top: 50%, left: 50%, margin: -35px 0 0 -35px, width: 70px, height: 70px, border-radius: 50%, content: ”, opacity: 0, pointer-events: none, .cbutton–box width: 24px, height: 24px, border: 4px solid rgb22, 35, 47, .cbutton–box-color-1 background: #ff8b00, .cbutton–box-color-2 background: #b61854, .cbutton–box-color-3 background: #1d5cab, .cbutton–box-color-4 background: #f2438c, .cbutton–box-color-5 background: #ff6414, .cbutton–box-color-6 background: #5ed500, .cbutton–box-color-7 background: #0077ff, .cbutton–box-color-8 background: #7bff00, .cbutton–box-color-9 background: #fff,

А сейчас я привожу стили уже конкретно для эффекта, который мы рассматриваем в качестве примера:

CSS КОД

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 .cbutton–effect-boris::after background: rgba111,148,182,0.1, .cbutton–effect-boris.cbutton–click::after -webkit-animation: anim-effect-boris 0.3s forwards, animation: anim-effect-boris 0.3s forwards, @-webkit-keyframes anim-effect-boris { 0% -webkit-transform: scale3d0.3, 0.3, 1, transform: scale3d0.3, 0.3, 1, 25%, 50% opacity: 1, to opacity: 0, -webkit-transform: scale3d1.2, 1.2, 1, transform: scale3d1.2, 1.2, 1, @keyframes anim-effect-boris { 0% -webkit-transform: scale3d0.3, 0.3, 1, transform: scale3d0.3, 0.3, 1, 25%, 50% opacity: 1, to opacity: 0, -webkit-transform: scale3d1.2, 1.2, 1, transform: scale3d1.2, 1.2, 1,

Анимация разводов и других эффектов для кнопки после нажатия создается с помощью ключевых кадров, которые стали доступны в CSS3.

Javascript

Но это еще не всё. Нам необходимо как-то применить анимацию после клика. То есть необходимо задать стили кнопке после того как кнопка была нажата. Лучшим способом это сделать с помощью jQuery.

Сперва подключаем необходимые библиотеки(modernizr.custom.js и classie.js):

HTML&JS КОД

1 2 &lt,script src=js/modernizr.custom.js&gt,&lt,/script&gt, &lt,script src=js/classie.js&gt,&lt,/script&gt,

После чего добавляем небольшой код, который и будет добавлять новый класс нашей кнопке при клике на нее:

HTML&JS КОД

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 function function mobilecheck var check = false, functionaif/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.testa||/1207|6310|6590|3gso|4thp|501-6i|770s|802s|a wa|abac|acer|oo|s\-|aiko|rn|alav|ca|co|amoi|anex|ny|yw|aptu|arch|go|aste|us|attw|audi|\-m|r |s |avan|beck|ll|nq|bilb|rd|blac|az|bre|vw|bumb|bw\-n|u|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|comp|nd|craw|dait|ll|ng|dbte|dc\-s|devi|dica|dmob|doc|po|ds12|\-d|el49|ai|eml2|ul|eric|k0|esl8|ez4-70|os|wa|ze|fetc|fly\-|_|g1 u|g560|gene|gf\-5|g\-mo|go\.w|od|grad|un|haie|hcit|hd\-m|p|t|hei\-|hipt|ta|hp i|ip|hs\-c|htc\-| |_|a|g|p|s|t|tp|huaw|tc|i\-20|go|ma|i230|iac |\-|\/|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|jat|va|jbro|jemu|jigs|kddi|keji|kgt |\/|klon|kpt |kwc\-|kyoc|k|leno|xi|lg g|\/k|l|u|50|54|\-a-w|libw|lynx|m1\-w|m3ga|m50\/|mate|ui|xo|mc01|21|ca|m\-cr|merc|ri|mio8|oa|ts|mmef|mo01|02|bi|de|do|t\-| |o|v|zz|mt50|p1|v |mwbp|mywa|n100-2|n202-3|n300|2|n500|2|5|n700|1|10|nec|m\-|on|tf|wf|wg|wt|nok6|i|nzph|o2im|opti|wv|oran|owg1|p800|pana|d|t|pdxg|pg13|\-1-8|c|phil|pire|play|uc|pn\-2|pock|rt|se|prox|psio|pt\-g|qa\-a|qc07|12|21|32|60|\-2-7|i\-|qtek|r380|r600|raks|rim9|rove|zo|s55\/|sage|ma|mm|ms|ny|va|sc01|h\-|oo|p\-|sdk\/|sec\-|0|1|47|mc|nd|ri|sgh\-|shar|sie\-|m|sk\-0|sl45|id|smal|ar|b3|it|t5|soft|ny|sp01|h\-|v\-|v |sy01|mb|t218|50|t600|10|18|tagt|lk|tcl\-|tdg\-|teli|m|tim\-|t\-mo|topl|sh|ts70|m\-|m3|m5|tx\-9|up\.b|g1|si|utst|v400|v750|veri|virg|te|vk40|50-3|\-v|vm40|voda|vulc|vx52|53|60|61|70|80|81|83|85|98|w3c\-| |webc|whit|wig |nc|nw|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.testa.substr0,4check = truenavigator.userAgent||navigator.vendor||window.opera, return check, var support = animations : Modernizr.cssanimations , animEndEventNames = ‘WebkitAnimation’ : ‘webkitAnimationEnd’, ‘OAnimation’ : ‘oAnimationEnd’, ‘msAnimation’ : ‘MSAnimationEnd’, ‘animation’ : ‘animationend’ , animEndEventName = animEndEventNames Modernizr.prefixed ‘animation’ , onEndAnimation = function el, callback var onEndCallbackFn = function ev if support.animations if ev.target != this return, this.removeEventListener animEndEventName, onEndCallbackFn , if callback && typeof callback === ‘function’ callback.call, , if support.animations el.addEventListener animEndEventName, onEndCallbackFn , else onEndCallbackFn, , eventtype = mobilecheck ? ‘touchstart’ : ‘click’, .slice.call document.querySelectorAll ‘.cbutton’ .forEach function el el.addEventListener eventtype, function ev classie.add el, ‘cbutton–click’ , onEndAnimation classie.has el, ‘cbutton–complex’ ? el.querySelector ‘.cbutton__helper’ : el, function classie.remove el, ‘cbutton–click’ , , , , ,

Внимание! Некоторые из эффектов являются экспериментальными и, следовательно, работают только в современных браузерах.

Успехов!

Источник: Оригинал

С Уважением, Бышкин Константин

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: