Анимированные кнопки

Веб-мастеру / Ресурсы / Сервисы вебмастеру

Анимированные кнопки

  1. tympanus.net/Tutorials/AnimatedButto - Animated Buttons with CSS3 Transitions and Animations - Несколько вариантов кнопок, выбираем, что понравилось и берем, не редактор, потом правим сами.
  2. tympanus.net/Tutorials/CSS3ButtonSwi - Button Switches with Checkboxes and CSS3 Fanciness - Кнопки-выключатели с графикой, код берем на Back to the Codrops Article, сразу на все.
  3. tympanus.net/Tutorials/CSSButtonsPse - CSS buttons with pseudo-elements - Клацающие 3D кнопки с текстом, код берем на Back to the Codrops Article сразу на все.
  4. ianlunn.github.io/Hover/#effects - Hover.css - Множество плоских кнопок, которые по-разному реагируют на нажатие.
    Код берем рядом с название и там ищем свое.
  5. codepen.io/blaketarter/pen/JGivD - Some Button Styles - Простые спокойные плоские кнопки, при наведении цвета становятся чуть ярче или появляется цвет в рамке, где его не было.
  6. codepen.io/cheeriottis/pen/inluv - Some buttons... a pen by Ottis Kelleghan - Клацающие 3D кнопки с текстом.
  7. codepen.io/creotip/pen/cfuAi - Animated CSS3 buttons - Анимированные объемные кнопки, что-то происходит при наведении и что-то при нажатии. Один код на все кнопки.
  8. codepen.io/Savantos/pen/mHIpt - Neat hover animations on buttons - Жмем на кнопку, пропадает фон и появляется стрелочка.
  9. codepen.io/tpalmer75/pen/iImsJ - Hover Wipe Buttons - При наведении фон раздвигается о типу штор.
  10. codepen.io/WordPressDev/pen/fxyqB - Creative CSS3 Button Styles with cool hover effect - Простые плоские кнопки, при наведении вместо текста вскакивает стрелочка.
  11. cssdeck.com/labs/google-buttons-2 - Google Buttons - Спокойные кнопки для меню, в стиле. Как используются на сервисах Google.
  12. cssdeck.com/labs/ldmtsmfk/ - CSS Radio Buttons - Из радио сделано вертикальное меню.
Английский язык

Используется: WordPress.

Очень простой и наглядный визуальный генератор кнопок.
Бегунки, выбор шрифта для текста на кнопке. Все на одной странице.
В конце жмем на кнопку и получаем код.

Библия от JesusChrist.ru


Английский язык
международные

CSS3 Animated buttons. a pen by Seth Abbott

Круглые яркие кнопки с текстом.
При нажатии, кнопка увеличивается не сдвигая ничего рядом, начинает крутится, меняя текст.



Английский язык
международные

CSS3 Button

Очень простой и наглядный визуальный генератор кнопок.
Все на одном месте, не надо собирать код по нескольким генераторам.
Код генерируется вместе с картинкой, отдельно CSS и ссылка.



Коллекция анимированных SVG иконок.
Можно зайти, попробовать, что произойдет при нажатии.
Жмем Back to the Codrops Article и скачиваем код сразу на все. Ищем свое.