A Simple CSS Based Usability for Search Buttons

by Vickram H 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 */

}
604
like
0
dislike
0
mail
flag

You must LOGIN to add comments