Graphic Design shadow to enhance presentation of images.
Graphic Design shadow to enhance presentation of images.

Web Design - Tips, Tricks and Programmng

Replacing a Submit Button with an Image

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum

Previous Thread Return to Topic Next Thread
Author Message

17 Designs

17 Designs

Date Joined:
Jan 19, 2010

Posts:
66

Posted: Wed Sep 7, 2011 11:29 AM

Subject: Replacing a Submit Button with an Image

Submit buttons as a whole are very boring however they are commonly recognized by the Internet community at large while is why many developers leave them to their default settings.

Where a design requirement is needed you may choose to replace the standard Submit button with an image.

Below is code for replacing the Submit button with a Magnifying Glass:

#submit-search {
width: 46px;
height: 43px;
margin: 0;
padding: 0;
border: 0;
background: transparent url(../images/common/search-magnifying-glass.gif) no-repeat left top;
text-indent: -1000em;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
outline: 0;
}


Make sure te width and the height match the size the the image.

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum