4 простых hover-эффекта для кнопки на чистом CSS
Различные эффекты при наведении на активные элементы интерфейса сайтов, стали настолько привычными, что привлечь внимание и удивить чем-то, искушенного пользователя, становится всё труднее. Материальный дизайн, опять же добавил ощутимую порцию движухи, ссылки, кнопки, элементы меню, поля ввода форм и чекбоксы, просто оживают под курсором. Достигается это по разному, с помощью javascript и на чистом css.
Наверное проще использовать готовые решения, благо упакованных фреймворков сейчас предостаточно, только в этом случае, трудно избежать однотипности дизайна сайтов. Меня больше интересуют решения, пускай без особых наворотов, простые в исполнении, но в тоже время по-своему оригинальные, и выразительные.
Сегодня представляю на ваше рассмотрение 4 простых hover-эффекта для полупрозрачных кнопок на чистом CSS.
Подробно расписывать расклад исходников не буду, посмотреть на весь «фарш» и поковыряться в коде, вы сможете непосредственно в онлайн-редакторе, соответственно там же и живой пример этих простеньких эффектов для полупрозрачных кнопок.
Надеюсь, этот небольшой набор правил css, кому-нибудь да и пригодится в работе над новыми проектами.
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Какая прелесть! Очень классный hover. Что-то подобное искал, хорошо что на чистом CSS.
Андрей,очень понравилось. Красиво и стильно.На самом деле необычно и не раздражает.
Отличная идея, возьму на вооружение
Круто спасибо!
круто, только чет у меня на заработало. всю конструкцию просто вставил в еще один div (без стилей)