Focus an input to trigger a nice effect below it (a blue border starting from the center to the edges)
/*
<div>
<input type="text" />
<span></span>
</div>
Check http://codepen.io/anon/pen/waRYXa?editors=110 for more example
*/
* { box-sizing: border-box; }
div {
position: relative;
width: 400px;
}
input { width: 100%; border: 0; border-bottom: 1px solid #ccc; }
span {
position: relative;
bottom: 0;
width: 0;
left: 50%;
background: blue;
height: 2px;
transition: width .5s, left .5s;
display: block;
}
input:focus {
outline: none;
}
input:focus + span {
left: 0%;
width: 100%;
}