5 кнопок с красивым эффектом на CSS3
 | |
| Отличная коллекция стилей для эффектов кнопок, которые производятся при навивании на них, где всего пять примеров выполнены на чистом HTML и CSS. Теперь для веб-разработчика остается найти ему нужный стиль кнопки, которая соответствует основному дизайну, и безусловно с характерным hover-эффектом. Которые идут в индивидуальной анимации, что совершенно разные по своему трюку, где нет аналогов. Теперь можно красиво, но главное оригинально оформить кнопки для сайта, которые можно задействовать под любую функцию. Хотя они все изначально идут под ссылку перехода на другую страницу. А что по анимации, то здесь всего прописан один класс, что отлично делает красивые эффекты, как только наведите курсор. Все необычные эффекты задействованы при помощи фоновых заливок, где идут тени с трансформацией. Набор стильных эффектов при наведении на кнопку 1. Первый вариант кнопки:  HTML Код <div class="pervaya-knopka"> <a href="">Кнопка №1</a><a href="">Кнопка №2</a><a href="">Кнопка №3</a> </div> CSS Код /* 1 кнопка */ .pervaya-knopka a { text-decoration: none; outline: none; display: inline-block; color: #f9f8f8; padding: 18px 25px; margin: 8px 15px; border-radius: 10px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 2px; background-image: linear-gradient(to right, #76d0d0 0%, #3f29d8 51%, #84e2d2 100%); background-size: 200% auto; box-shadow: 0 0 20px rgba(12, 12, 12, 0.1); transition: .5s; } .pervaya-knopka a:hover {background-position: right center;} Здесь производится анимация с наведением на кнопку, и все это достигается за счёт градиентной заливки, которая начинает перемещаться в сторону. 2. Второй вариант кнопки:  HTML Код <div class="elegantnaya-knopochka"> <a href="">Скрипты №1</a><a href="">Скрипты №2</a><a href="">Скрипты №3</a> </div> CSS Код /* 2 кнопка */ .elegantnaya-knopochka a { text-decoration: none; outline: none; display: inline-block; padding: 18px 25px; margin: 8px 15px; position: relative; color: #fdfdfd; border: 1px solid rgba(243, 239, 239, 0.4); background: none; font-weight: 300; font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 2px; } .elegantnaya-knopochka a:before, .elegantnaya-knopochka a:after { content: ''; position: absolute; width: 0; height: 0; opacity: 0; box-sizing: border-box; } .elegantnaya-knopochka a:before { bottom: 0; left: 0; border-left: 1px solid #f9f4f4; border-top: 1px solid #f9f4f4; transition: 0s ease opacity .8s, .2s ease width .4s, .2s ease height .6s; } .elegantnaya-knopochka a:after { top: 0; right: 0; border-right: 1px solid #fdfafa; border-bottom: 1px solid #fdfafa; transition: 0s ease opacity .4s, .2s ease width , .2s ease height .2s; } .elegantnaya-knopochka a:hover:before, .elegantnaya-knopochka a:hover:after{ height: 100%; width: 100%; opacity: 1; } .elegantnaya-knopochka a:hover:before {transition: 0s ease opacity 0s, .2s ease height, .2s ease width .2s;} .elegantnaya-knopochka a:hover:after {transition: 0s ease opacity .4s, .2s ease height .4s , .2s ease width .6s;} .elegantnaya-knopochka a:hover {background: rgba(255,255,255,.2);} Здесь для псевдоэлементов по умолчанию выставлена высота в ноль и аналогично идет ширина, что станет изменяться при 100% при наведении. 3. Третий вариант кнопки:  HTML Код <div class="uskanenaya-knorkaus"> <a href="">Переход №1</a><a href="">Переход №2</a><a href="">Переход №3</a> </div> CSS Код /* 3 кнопка */ .uskanenaya-knorkaus a { text-decoration: none; outline: none; display: inline-block; width: 135px; height: 43px; line-height: 43px; border-radius: 43px; margin: 8px 15px; font-family: 'Montserrat', sans-serif; font-size: 12px; text-transform: uppercase; text-align: center; letter-spacing: 3px; font-weight: 600; color: #797675; background: white; box-shadow: 0 8px 15px rgba(25, 23, 23, 0.2); transition: .3s; border: 2px solid #e6e1e1; } .uskanenaya-knorkaus a:hover { background: #4094ea; box-shadow: 0 15px 20px rgba(94, 159, 243, 0.4); color: #fbf9f9; transform: translateY(-7px); } Здесь оригинальный по своему эффект за кнопкой, который аналогично производится при наведении, что автоматически меняется гамма цвета и текста, что идет по вверх. Также преобразуется тень блока, которая станет смещаться вверх при помощи трансформации. 4. Четвертый вариант кнопки:  HTML Код <div class="ameyuscu-amanedin"> <a href="">ZorNet.Ru №1</a><a href="">ZorNet.Ru №2</a><a href="">ZorNet.Ru №3</a> </div> CSS Код /* 4 кнопка */ .ameyuscu-amanedin a { text-decoration: none; outline: none; display: inline-block; background-image: linear-gradient(45deg, #3d8ab3 0%, #16f3e8 50%, #1e4084 100%); background-position: 100% 0; background-size: 200% 200%; color: #fdf9f9; border-radius: 100px; padding: 10px 34px; margin: 8px 15px; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 300; box-shadow: 0 16px 32px 0 rgba(15, 77, 146, 0.35); transition: .5s; } .ameyuscu-amanedin a:hover { box-shadow: 0 0px 0px 0 rgba(5, 34, 93, 0); background-position: 0 0;} Отличный вариант, где задействованы градиенты, как основная гамма цвета, так как на кнопки по умолчанию находятся несколько оттенков, что при наведение они отлично меняются, что создают уникальный виденье. 5. Пятый вариант кнопки:  HTML Код <div class="deminiso-vanunakis"> <a href="">Ссылка №1</a><a href="">Ссылка №2</a><a href="">Ссылка №3</a> </div> CSS Код .deminiso-vanunakis a { text-decoration: none; outline: none; color: #fbf8f8; display: inline-block; position: relative; padding: 14px 24px; border: 1px solid; border-image: linear-gradient(180deg,#e6441f,#da2927,#e2206e,#f766be); border-image-slice: 1; margin: 8px 15px; font-family: 'Montserrat', sans-serif; text-transform: uppercase; overflow: hidden; letter-spacing: 2px; transition: .8s cubic-bezier(.165,.84,.44,1); } .deminiso-vanunakis a:before { content: ''; position: absolute; left: 0; top: 0; height: 0; width: 100%; z-index: -1; color: #f9f3f3; background: linear-gradient(180deg,#e83f18,#e81917,#ce155f,#f157b5); transition: .8s cubic-bezier(.165,.84,.44,1); } .deminiso-vanunakis a:hover {background: rgba(253, 249, 249, 0);} .deminiso-vanunakis a:hover:before { bottom: 0%; top: auto; height: 100%; } Здесь увидим с наведением курсора оригинальную подборку оттенков, что также идет под градиент, только в ярких цветах, где меняет высоту с нуля на 100%, где изначально выстраивали дизайн под темный формат. PS - Как изначально написано в описание, что большинство примеров реализованы в один класс, который отлично редактируется по всем направлениям, это сам трюк и безусловно стилистика дизайна. Где есть возможность задействовать оригинальную цветовую палитру, также прописать стильный шрифт, но и сам размер подобрать, что соответствовал вашим данным, а точнее, чтоб органично вписались в общею стилистику дизайн сайта. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
