Главная » HTML & CSS » 4 простых hover-эффекта для кнопки на чистом CSS

4 простых hover-эффекта для кнопки на чистом CSS

Различные эффекты при наведении на активные элементы интерфейса сайтов, стали настолько привычными, что привлечь внимание и удивить чем-то, искушенного пользователя, становится всё труднее. Материальный дизайн, опять же добавил ощутимую порцию движухи, ссылки, , элементы меню, поля ввода форм и чекбоксы, просто оживают под курсором. Достигается это по разному, с помощью javascript и на чистом css.
Наверное проще использовать готовые решения, благо упакованных фреймворков сейчас предостаточно, только в этом случае, трудно избежать однотипности дизайна сайтов. Меня больше интересуют решения, пускай без особых наворотов, простые в исполнении, но в тоже время по-своему оригинальные, и выразительные.

Сегодня представляю на ваше рассмотрение 4 простых hover-эффекта для полупрозрачных кнопок на чистом CSS.
 
4 Hover-эффекта для кнопки на CSS
 
Подробно расписывать расклад исходников не буду, посмотреть на весь «фарш» и поковыряться в коде, вы сможете непосредственно в онлайн-редакторе, соответственно там же и живой пример этих простеньких эффектов для полупрозрачных кнопок.
 

 
Надеюсь, этот небольшой набор правил css, кому-нибудь да и пригодится в работе над новыми проектами.

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

3 комментария
  1. Андрей:

    Какая прелесть! Очень классный hover. Что-то подобное искал, хорошо что на чистом CSS.

    Ответить
  2. Андрей,очень понравилось. Красиво и стильно.На самом деле необычно и не раздражает.

    Ответить
  3. Отличная идея, возьму на вооружение

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru