Стильный кнопка с эффектом наведение
 | |
| Красивый и стильный эффект при наведение на кнопку, как скачать или перейти на другую страницу сайта с оригинальным стилем. Безусловно такой тип будет на сайте замечен и оценил пользователем, здесь когда наводишь клик на кнопку, то происходит эффект вырастание или дублирование ее, что на темном фоне уникально смотрится. Она выполнена полностью на стилях, что вы можете сами выбрать ней оттенок цвета и также с ней идет основной код, который можно поставить под функцию на интернет ресурсе. Она похоже на старый стиль гугл, это где идет только обвод и в центре написано, это можно написать "Скачать" или "Перейти" вообщем то что вам нужно. По умолчанию она идет с светло синей гамме, что под черный фон, так что если фон у вас светлый и сама кнопка понравилась, то придется поменять оттенок и выставить тот, что основной у вам на сайте. Это для разнообразие сайта в стилистике будет отличным решением, и сама установка простая. Это в CSS прописать стиль и код поставить там где вы решили видеть эту кнопку, также под нее, чтоб понятнее было идет DEMO, что визуально можно посмотреть весь функционал. Приступаем к установке: Код HTML устанавливаем по месту. Код <div class="btn-wrapper"> <div class="btn-wrapper__container"> <div class="btn-inner"> <a class="btn-inner__text" href="http://zornet.ru/">ZORNET.RU</a> </div> </div> </div> Можно поставить ниже кода, так как стиль заключен в style, если их убрать в начале и в конце, то в CSS прописываем. Код <style type="text/css"> html, body { height: 100%; margin: 0; } body { display: flex; justify-content: center; align-items: center; background-image: url("http://zornet.ru/zorner_ru_1/Abter/ep_naturalblack.png"); } .btn-wrapper { width: 290px; height: 110px; position: relative; margin: 40px auto 0; } .btn-wrapper:hover .btn-inner { top: -4px; transform: scale(1, 1); cursor: pointer; } .btn-wrapper__container { border-bottom: 2px solid #15B5E2; position: absolute; width: 100%; height: 80px; } .btn-wrapper__container:before, .btn-wrapper__container:after { border-bottom: 2px solid #15B5E2; width: 96%; left: 2%; bottom: -8px; content: ""; position: absolute; } .btn-wrapper__container:after { width: 92%; left: 4%; bottom: -14px; } .btn-wrapper__container .btn-inner { width: 104.2%; height: 100%; position: absolute; top: 20px; left: -2.1%; border: 2px solid #15B5E2; box-sizing: border-box; display: flex; justify-content: center; align-items: center; font-family: sans-serif; letter-spacing: 1px; text-transform: uppercase; font-size: 18px; background: #10131C; transform: scale(0.96, 0.96); transition: all .3s; z-index: 4; } .btn-wrapper__container .btn-inner__text { text-decoration: none; color: #15B5E2; } </style> Сейчас очень много современных шаблонов и такой стиль кнопки будет отличным решением дополнить дизайн. Просмотр демонстраций материала. Источник: art-ucoz.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
, но выглядит красиво