A Simple CSS Based Usability for Search Buttons
by Vickram H[ Edit ] 2012-09-06 16:53:43
A Simple CSS Based Usability for Search Buttons:
This is a small tip to improve the usability of search fields.
The trick is to use CSS sprites and show the animated loader image while the user clicks the button(on focus), indicating that the page is being loaded.
Example Code:
input.submit{
width:16px;
height:16x;
display:block;
overflow:hidden;
text-indent:-999px; /* To remove any default text on the button*/
line-height:16px; /* required for safari */
background:url(search-sprite.gif) no-repeat 0 0; /* This will display the search icon by default */
cursor : pointer; /* Hand cursor for the normal state */
border:none;
padding:0;
}
input.submit:hover{
background-position: 0 -16px; /* This will display the dark search icon on hover */
}
input.submit:active{
background-position: 0 -32px; /* And finally, this is the one that shows the loader */
cursor:wait; /* Shows the wait cursor on click */
}
