Input Field Hover Effect

This describe how to make smooth hover effect on input text field.

by Dhanushka Chandana

HTML

<input type = "text" />

<p>
    Mouese over input field and see the smooth of color changing. only css uses to do that design.
</p>

CSS

input { 
    font-size: 14px; 
    font-size: 0.75rem; 
    padding: 10px;  
    border: 1px solid #d7d8d8; 
    -moz-transition: all 0.25s ease-in-out; 
    transition: all 0.25s ease-in-out; 
}

input[type=text] {
     width: 60%; 
}
input[type=text]:hover, textarea:hover {
     border: 1px solid #e64946; 
}

p{
    color: #e64946;
}