Потрясающие эффекты для кнопок при нажатии
Время чтения: 3 мин.Всем привет! В последнее время популярным становится использование анимации на сайтах. Это хороший способ привлечь внимание и выделить сайт на фоне остальных. Бывает даже самая маленькая деталь может оставить эффект, который еще долго будешь вспоминать и думать как же он был сделан. В сегодняшней статье Вас ждет набор эффектов созданных с помощью CSS анимации — эффекты для кнопок после нажатия.
Полный набор эффектов для кнопок можно посмотреть ниже:
Смотреть примерСкачать
Также рекомендую посмотреть похожие статьи на эту тему:
HTML
Для начала подключаем между тегами <head> </head> следующие стили (normalize.css, Font Awesome, demo.css
HTML КОД
1 2 3 4 | <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" /> |
В качестве примера будем рассматривать эффект BORIS. Начнем со HTML структуры кнопок:
HTML КОД
1 2 3 4 | <button> <i></i> <span>Backward</span> </button> |
Обычный тег кнопки <button> <button> внутри которого есть иконка.
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: rgba(0, 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 rgb(22, 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: rgba(111,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: scale3d(0.3, 0.3, 1); transform: scale3d(0.3, 0.3, 1); } 25%, 50% { opacity: 1; } to { opacity: 0; -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1); } } @keyframes anim-effect-boris { 0% { -webkit-transform: scale3d(0.3, 0.3, 1); transform: scale3d(0.3, 0.3, 1); } 25%, 50% { opacity: 1; } to { opacity: 0; -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1); } } |
Анимация «разводов» и других эффектов для кнопки после нажатия создается с помощью ключевых кадров, которые стали доступны в CSS3.
Javascript
Но это еще не всё. Нам необходимо как-то применить анимацию после клика. То есть необходимо задать стили кнопке после того как кнопка была нажата. Лучшим способом это сделать — с помощью jQuery.
Сперва подключаем необходимые библиотеки(modernizr.custom.js и classie.js):
HTML&JS КОД
1 2 | <script src="js/modernizr.custom.js"></script> <script src="js/classie.js"></script> |
После чего добавляем небольшой код, который и будет добавлять новый класс нашей кнопке при клике на нее:
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; (function(a){if(/(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.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.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' ); } ); } ); } ); })(); |
Внимание! Некоторые из эффектов являются экспериментальными и, следовательно, работают только в современных браузерах.
Успехов!
Источник: Оригинал
С Уважением, Бышкин Константин
Набор кнопок для сайта с CSS3 эффектами нажатия!
Привет, друзья! Хочу с радостью представить Вам набор кнопок для сайта. По-моему, невозможно создать ни один сайт без кнопок. В этом уроке мы рассмотрим css3 кнопки с псевдо-элементами, а также эффекты, созданные с помощью них.
Я покажу Вам, как создать кнопку с изюминкой, используя только лишь один тег для кнопки + великую силу CSS3. На нашем сайте есть большое количество кнопок и эффектом для них, и одну из коллекция смотрите здесь.
Эти кнопки не имеют CSS переходов, так как не многие браузеры поддерживает их для псевдо-элементов. Я думаю, что эти кнопки работают нормально и без них, и смотрятся достаточно солидно и современно.
HTML разметка кнопок
Структура всех этих кнопок очень проста, всего одна ссылка. Другие части кнопки, мы будем создавать с псевдо-классом :before
.
<a href=»#»> Нажми меня! </a> |
Давайте рассмотрим каждый из эффектов в отдельности.
→ Пример 1
Я думаю, это самый простой пример, со знакомыми свойствами CSS.
Прежде всего, мы дадим общие стили для всей кнопки, в том числе и в активном состоянии. Важно заметить относительное позиционирование (
), так как это поможет нам позже с позиционированием элемента :before
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .a_demo_one { background-color:#ba2323; padding:10px; position:relative; font-family: ‘Open Sans’, sans-serif; font-size:12px; text-decoration:none; color:#fff; border: solid 1px #831212; background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%); border-radius: 5px; } .a_demo_one:active { padding-bottom:9px; padding-left:10px; padding-right:10px; padding-top:11px; top:1px; background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%); } |
Затем, мы создаем серый контейнер используя псевдо-элемент :before
. Абсолютное позиционирование (position:absolute;
), дает нам много преимуществ:
.a_demo_one::before { background-color:#ccd0d5; content:»»; display:block; position:absolute; width:100%; height:100%; padding:8px; left:-8px; top:-8px; z-index:-1; border-radius: 5px; box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff; } |
→ Пример 2
Этот пример сложнее, так как мы создадим 3D эффект нажатия (когда Вы нажимаете на неё, она идет вниз).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .a_demo_two { background-color:#6fba26; padding:10px; position:relative; font-family: ‘Open Sans’, sans-serif; font-size:12px; text-decoration:none; color:#fff; background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%); box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d; border-radius: 5px; } .a_demo_two:active { top:7px; background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%); box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d; color: #156785; text-shadow: 0px 1px 1px rgba(255,255,255,0.3); background: rgb(44,160,202); } |
И вот в чем вся хитрость:
Поскольку положение псевдо-элемента зависит от его родительского элемента, после того, как родитель перемещается вниз на несколько пикселей, мы должны двигать псевдо-элемент вверх на такое же количестве пикселей.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .a_demo_two::before { background-color:#072239; content:»»; display:block; position:absolute; width:100%; height:100%; padding-left:2px; padding-right:2px; padding-bottom:4px; left:-2px; top:5px; z-index:-1; border-radius: 6px; box-shadow: 0px 1px 0px #fff; } .a_demo_two:active::before { top:-2px; } |
→ Пример 3
Эта кнопка мне особенно очень нравится! Это разделенная кнопка, которая “ломается” при нажатии на неё.
Опять же, первое, что мы должны сделать, это создать более легкие части. Здесь мы также задаем отступ margin
с левой стороны, чтобы компенсировать ширину псевдо-элемента, и расположить кнопку по центру.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .a_demo_three { background-color:#3bb3e0; font-family: ‘Open Sans’, sans-serif; font-size:12px; text-decoration:none; color:#fff; position:relative; padding:10px 20px; border-left:solid 1px #2ab7ec; margin-left:35px; background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); border-top-right-radius: 5px; border-bottom-right-radius: 5px; box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; } .a_demo_three:active { top:3px; background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; } |
Вот сам псевдо-элемент 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 | .a_demo_three::before { content:»·»; width:35px; max-height:29px; height:100%; position:absolute; display:block; padding-top:8px; top:0px; left:-36px; font-size:16px; font-weight:bold; color:#8fd1ea; text-shadow:1px 1px 0px #07526e; border-right:solid 1px #07526e; background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%); border-top-left-radius: 5px; border-bottom-left-radius: 5px; box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ; } .a_demo_three:active::before { top:-3px; box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ; } |
→ Пример 4
На этот раз мы будем использовать псевдо-элемент стрелку, используя одно изображение в качестве фона, хотя вы можете использовать и шрифт иконок.
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 | .a_demo_four { background-color:#4b3f39; font-family: ‘Open Sans’, sans-serif; font-size:12px; text-decoration:none; color:#fff; position:relative; padding:10px 20px; padding-right:50px; background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%); border-radius: 5px; box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999; } .a_demo_four:active { top:3px; background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%); box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999; } .a_demo_four::before { background-color:#322620; background-image:url(../images/right_arrow.png); background-repeat:no-repeat; background-position:center center; content:»»; width:20px; height:20px; position:absolute; right:15px; top:50%; margin-top:-9px; border-radius: 50%; box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066; } .a_demo_four:active::before { top:50%; margin-top:-12px; box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29; } |
→ Пример 5
Это пример кнопки “Нравится!”, которую Вы можете использовать на свое усмотрение.
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 | .a_demo_five { background-color:#9827d3; width:150px; display:inline-block; font-family: ‘Open Sans’, sans-serif; font-size:12px; text-decoration:none; color:#fff; position:relative; margin-top:40px; padding-bottom:10px; padding-top:10px; background-image: linear-gradient(bottom, rgb(168,48,232) 100%, rgb(141,32,196) 0%); border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: inset 0px 1px 0px #ca73f8, 0px 5px 0px 0px #6a1099, 0px 10px 5px #999; } .a_demo_five:active { top:3px; background-image: linear-gradient(bottom, rgb(168,48,232) 0%, rgb(141,32,196) 100%); box-shadow: inset 0px 4px 1px #7215a3, 0px 2px 0px 0px #6a1099, 0px 5px 3px #999; } .a_demo_five::before { background-color:#fff; background-image:url(../images/heart.gif); background-repeat:no-repeat; background-position:center center; border-left:solid 1px #CCC; border-top:solid 1px #CCC; border-right:solid 1px #CCC; content:»»; width:148px; height:40px; position:absolute; top:-30px; left:0px; margin-top:-11px; z-index:-1; border-top-left-radius: 5px; border-top-right-radius: 5px; } .a_demo_five:active::before { top: -33px; box-shadow: 0px 3px 0px #ccc; } |
Да, это конец!
Мы закончили работу над этим набором кнопок для сайта, с CSS3 и 3D эффектами. Однако помните, что эти кнопки все же по большей части экспериментальные, поэтому не каждый браузер поддерживает их достаточно хорошо.
Спасибо за чтение этого урока, и я надеюсь, что Вам понравилось!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко
Оформление кнопок и иконок
626 Animation / Buttons / CodepenКоллекция css анимаций кнопок
Коллекция css анимаций для кнопок при наведении на них курсора
5 258 Скрипты / ButtonsFlat кнопки
Готовый комплект из кнопок в стиле flat дизайна. Четыре размера на выбор: small, normal, medium и large.
1 985 Скрипты / ButtonsОформление тегов на CSS3
Посмотрим как можно по современному оформить обычные теги используя CSS3, но рассмотрим также и вариант с поддержкой iexplorer старых версий.
3 268 Скрипты / ButtonsЭффект при наведении и шрифт с иконками
Воспользуемся сервисом IcoMoon App для того, чтобы создать симпатичный эффект при наведении на иконку.
2 860 Скрипты / ButtonsКнопки с эффектами CSS3
Двенадцать иконок с различными CSS3 эффектами, которые можно взять себе на вооружение. Болшинство эффектов будет работать в большинстве современных браузеров.
4 597 Скрипты / ButtonsКреативные эффекты CSS3 для кнопок
Набор эффектов для создания креативных кнопок с анимацией на CSS3 при наведении и нажатии. В некоторых местах использовался и jаvascript для добавления/удаления классов с эффектами.
6 990 Скрипты / ButtonsCSS3 кнопки с бликом
CSS3 кнопки для сайта объединяющие в себе свойства box-shadow, border-radius и анимацию для создания эффекта блеска при наведении мышки. Снова замечу, что в старых браузерах должным образом этот эффект не будет.
3 432 Скрипты / ButtonsCSS3 кнопка с анимацией
Сделаем кнопки с анимацией при наведении мышки на css3. Это аналог кнопок, которые используются на нашем сайте.
3 041 Скрипты / ButtonsКнопка покупки на CSS3
Кнопка при наведении на которую происходит отображение скрытого содержимого. В данном случае это кнопка покупки товара, при наведении отображается цена, а при нажатии вы можете реализовать добавление товара в корзину.
2 044 Скрипты / ButtonsКнопки с CSS3 псевдо-элементами
Сделаем необычные кнопки с использованием только одного тега ссылки, и конечно же благодаря CSS3.
2 378 Скрипты / ButtonsАнимированные CSS3 кнопки
Симпатичные CSS3 кнопки, которые при наведении на них изменяют свою форму.
3 945 Скрипты / ButtonsКнопка Скачать на CSS3
Кнопка Загрузки с эффектами CSS3 при наведении. Выглядит очень эффектно и стильно, но ограничение это поддержка браузерами CSS3.
40+ эффектов при наведении
Время чтения: 2 мин.Чтобы привлечь внимание пользователей есть очень много способов: начиная от самых надоедливых и пугающих, я имею ввиду всплывающие окна, которые нельзя закрыть и переадресовывают на другие сайты, и более простых, таких как интересное выделение ссылки. Вот последний случай мы и рассмотрим в этом уроке. В этом уроке мы рассмотрим специальную библиотеку написанную на CSS3, которая позволяет выделять ссылки при наведении на нее. А это делает более интерактивную связь с пользователем.
По ссылкам, расположенным ниже, вы можете посмотреть примеры, а также скачать демо версию:
Посмотреть примерСкачать
Как пользоваться? — 40+ эффектов при наведении
HTML часть
Возможно разработчики этой библиотеки иногда обновляют ее, поэтому рекомендую скачать ее отсюда — перейти (последнюю версию).
Вам нужен файл hover-min.css — это уменьшенная версия библиотеки. Его необходимо подключить в начале вашего сайта:
1 2 3 4 5 | <head> .. <link href="путь_до_файла/hover.css" rel="stylesheet"> .. </head> |
Затем осталось лишь добавить эффект для нашей ссылки. К примеру вот код нашей ссылки:
1 | <a href="#">Кнпока</a> |
Стиль для примера я выбрал вот такой:
Если кому-то понравился стиль кнопки, вот код CSS для нее:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .btn { position: relative; vertical-align: top; width: 100%; height: 60px; padding: 0; font-size: 22px; color: white; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); background: #9b59b6; border: 0; border-bottom: 2px solid #8d4ca7; cursor: pointer; -webkit-box-shadow: inset 0 -2px #8d4ca7; box-shadow: inset 0 -2px #8d4ca7; text-decoration:none; padding:20px; } |
И чтобы придать эффект, вам лишь нужно написать его через пробел в атрибуте class. Я выбрал эффект, при котором кнопка зависает вверху, когда на нее наводят:
1 | <a href="#">Кнопка</a> |
Вот и всё! Что получилось у меня (это GIF изображение, поэтому если анимации нет — нужно подождать пока подгрузится):
Вывод
Еще один неплохой набор эффектов, которые можно использовать в своих проектах. А всё что нужно — это подключить библиотеку CSS3!
Также про эффекты при наведение на ссылки вам будут интересны следующие статьи:
Успехов!
С Уважением, Юрий Немец
Кнопки CSS3 — творческие стили 30+ кнопок!
Сегодня мы рассмотрим креативные кнопки css3, которые должны вдохновить Вас. Это целый набор из более чем 30 штук, который состоит из простых, но красивых эффектов. CSS3 эффекты можно увидеть при наведении на определенные кнопки или нажатии на них. Обязательно посмотрите также кнопки с анимацией иконок на css3.
Главным образом, мы используем css переходы (transitions
), но присутствуют также и CSS анимации. И мы используем немного JavaScript, но только для того, чтобы добавить / удалить класс с эффектами.
Иконки, которые мы добавляем с использованием псевдо-класса :before
(а иногда :after
), взяты с сервиса IcoMoon.
Пожалуйста, обратите внимание: эти кнопки работает только в тех браузерах, которые поддерживают соответствующие свойства CSS3. Мы не даем гарантии отличной работы во всех браузерах.
Итак, давайте посмотрим на некоторые моменты красивых кнопочек css, которые мы создаем.
HTML&CSS3 кнопки
Разметка кнопки действительно очень проста. Мы просто добавить конкретные общие классы:
<button>Button</button> |
Общих класс .btn
для всех кнопок, который сбрасывает все стили по умолчанию, и далее мы используем конкретные пронумерованные классы для различных наборов стилей. Второй класс btn-6
это общий класс для определенной группы кнопок со стилями.
И ещё каждая кнопка имеет дополнительный, определенный класс. Для использования иконки, мы добавить класс, который будет использовать псевдо элемента :before
, чтобы добавить символ значок из шрифта.
Например, вот стили конкретной кнопки:
/* Кнопка 6d */ .btn-6d { border: 2px dashed #226fbe; } .btn-6d:hover { background: transparent; color: #226fbe; } |
Какие, конечно, зависит от того, что мы определяем в общих стилях .btn
и .btn-6
.
Это классовая структура кнопок используется для демонстрационных целей. При использовании какой-то кнопки на своем сайте, лучше конечно объединить стили.
Надеюсь Вам понравилось, и Вы ещё раз убедились, что с CSS3 можно сделать много чего! Практикуйте, используйте и я надеюсь, Вам пригодятся эти современные кнопки на css3! Успехов!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко
Эффекты 3D для кнопки при помощи CSS3
Вашему вниманию подборка кнопок, что исполнены форме 3D с разным эффектом, что можно их использовать на разнообразные функций на сайте. Стиль CSS, активный селектор используется для выбора и изменения стилей активной ссылки, чтобы сделать их привлекательными. Ссылка или тег становится активной при нажатии на нее. Где автоматически появится анимация, что безусловно понравится пользователю.В этой статье, материале применили селектор CSS, для активного перехода или ссылки, который похожа на кнопку, для того, чтобы произвести эффект. Здесь мы продемонстрировали применение css к элементу, который имеет первый нормальный селектор. Но затем, активный селектор и последний селектор hover, применить, чтобы сделать его внешний вид более элегантным и привлекательным для глаз.
Синтаксис
Нормальный: в этом элементе наведение.
HTML
Код
<a href=»http://zornet.ru/load/81″>Скрипты для uCoz</a>
CSS
Код
.normal-link{
background: #237E7C;
}
Active Selector: в основном используется для создания различий между визуализацией нормального и клика или создания привлекательных стилей для интерфейса.
HTML
Код
<a href=»http://zornet.ru/load/142″>Шаблоны для uCoz</a>
CSS
Код
.active-link{
background: #237E7C;
}
// On click, it changes the background color
.active-link:active{
background: #5A5A5A;
}
Hover Selector: селектор Hover также используется для привлекательного интерфейса. Он работает, когда мышь берется по ссылке.
HTML
Код
<a href=»http://zornet.ru/load/145″>HTML и CSS</a>
CSS
Код
.hover-link{background: #237E7C;
}
// On hover, it change the background colour.
.hover-link:hover{
background: #437294;
}
Вывод:
В этом статье мы узнали о том, как создавать различия между визуализацией, используя: active, : hover selector.
Вы также можете ссылаться на демонстрацию или загрузить файл, где представлены все стили на эффекты.
Демонстрация: