Putin Text Input Effects

A collection of modern text input effects for your forms!

30 effects | 27 colors | 3 sizes | Helper classes | Thousands of variations

Effect 1:

.effect-1

Effect 2

.effect-2

Effect 3

.effect-3

Effect 4

.effect-4

Effect 5

.effect-5

Effect 6

.effect-6

Effect 7

.effect-7

Effect 8:

.effect-8

Effect 9

.effect-9

Effect 10

.effect-10

Effect 11

.effect-11

Effect 12

.effect-12

Effect 13

.effect-13

Effect 14

.effect-14

Effect 15

.effect-15

Effect 16

.effect-16

Effect 17

.effect-17

Effect 18

.effect-18

Effect 19

.effect-19

Effect 20

.effect-20

Effect 21

.effect-21

Effect 22

.effect-22

Effect 23

.effect-23

Effect 24

.effect-24

Effect 25

.effect-25

Effect 26

.effect-26

Effect 27

.effect-27

Effect 28

.effect-28

Effect 29

.effect-29

Effect 30

.effect-30

Border 1 Colors:

Set colors for input bottom border

.putin-border1-color-1
.putin-border1-color-2
.putin-border1-color-3
.putin-border1-color-4
.putin-border1-color-5
.putin-border1-color-6
.putin-border1-color-7
.putin-border1-color-8
.putin-border1-color-9
.putin-border1-color-10
.putin-border1-color-11
.putin-border1-color-12
.putin-border1-color-13
.putin-border1-color-14
.putin-border1-color-15
.putin-border1-color-16
.putin-border1-color-17
.putin-border1-color-18
.putin-border1-color-19
.putin-border1-color-20
.putin-border1-color-21
.putin-border1-color-22
.putin-border1-color-23
.putin-border1-color-24
.putin-border1-color-25
.putin-border1-color-26
.putin-border1-color-27

Border 2 Colors:

Set colors for bottom border overlay

.putin-border2-color-1
.putin-border2-color-2
.putin-border2-color-3
.putin-border2-color-4
.putin-border2-color-5
.putin-border2-color-6
.putin-border2-color-7
.putin-border2-color-8
.putin-border2-color-9
.putin-border2-color-10
.putin-border2-color-11
.putin-border2-color-12
.putin-border2-color-13
.putin-border2-color-14
.putin-border2-color-15
.putin-border2-color-16
.putin-border2-color-17
.putin-border2-color-18
.putin-border2-color-19
.putin-border2-color-20
.putin-border2-color-21
.putin-border2-color-22
.putin-border2-color-23
.putin-border2-color-24
.putin-border2-color-25
.putin-border2-color-26
.putin-border2-color-27

Label Shrink:

Shrink labels when input is focused

.putin-label-shrink

Input Sizes:

Small, normal and large inputs

.putin-small
.putin-normal
.putin-large

Typography:

Bold and light states

.putin-bold
.putin-light

Horizontal Alignment:

Left, center and right aligned labels

.putin-left
.putin-center
.putin-right

Vertical Movement:

Up and down labels

.putin-up
.putin-down

Input Color:

Color for input text

.putin-color-1
.putin-color-2
.putin-color-3
.putin-color-4
.putin-color-5
.putin-color-6
.putin-color-7
.putin-color-8
.putin-color-9
.putin-color-10
.putin-color-11
.putin-color-12
.putin-color-13
.putin-color-14
.putin-color-15
.putin-color-16
.putin-color-17
.putin-color-18
.putin-color-19
.putin-color-20
.putin-color-21
.putin-color-22
.putin-color-23
.putin-color-24
.putin-color-25
.putin-color-26
.putin-color-27

Label Color:

Input label color

.putin-label-color-1
.putin-label-color-2
.putin-label-color-3
.putin-label-color-4
.putin-label-color-5
.putin-label-color-6
.putin-label-color-7
.putin-label-color-8
.putin-label-color-9
.putin-label-color-10
.putin-label-color-11
.putin-label-color-12
.putin-label-color-13
.putin-label-color-14
.putin-label-color-15
.putin-label-color-16
.putin-label-color-17
.putin-label-color-18
.putin-label-color-19
.putin-label-color-20
.putin-label-color-21
.putin-label-color-22
.putin-label-color-23
.putin-label-color-24
.putin-label-color-25
.putin-label-color-26
.putin-label-color-27

Mixture:

You can use a combination of classes altogether

.putin-right .putin-down .putin-label-shrink .putin-color-17 .putin-label-color-17 .putin-border1-color-22 .putin-border2-color-25