This a couple of more inspirational styles for text input effects including some new techniques and ideas by Codrops.

The concept is: make (subtle) enhancements for text inputs to make them more engaging and fun.

CSS transitions and sometimes CSS animations are used on the label element or on pseudo-elements.

TextInputEffects_Set2

[gpp_button color=”blue” url=”http://tympanus.net/Development/TextInputEffects/index2.html” title=”Text Input Effects” icon_left=”external” target=”_blank” size=”medium” display=”inline”]Demo[/gpp_button]    [gpp_button color=”blue” url=”http://tympanus.net/codrops/2015/03/18/inspiration-text-input-effects-2/” title=”Text Input Effects” icon_left=”cloud-download” target=”_blank” size=”medium” display=”inline”]Source[/gpp_button]

Please note that the effects have been tested in the latest versions of modern browsers. They might not work as expected in older browsers.