Published on: 20 July, 2013

How to style Image Submit Button using CSS?

Posted by andy | 2468 views 2 likes 0 favourites 0 comments
Tumblr Digg Google Plus

In this tutorial, you will learn how to create a css image submit button. Before getting started, you will need to know the following information:

  • The size or dimension of the image button
  • The location of the image.
  • Create a class name in css, in this example, we named it pressButton

We assume we place the image location under the images folder. Below is the example of the html tags containing a submit button with a class added to the tag called pressButton.

<input type="submit" class="pressButton" value="Submit"/>

Next is to create a css style, you can place this style directly to the html file or you can place it in a separated css file stylesheet.

.pressButton{
     border:none;
     display:block;
     width:128px;
     height:128px;
     overflow:hidden;
     cursor:pointer;
     background:url(images/pressbutton.png) no-repeat;
}

One of the important thing to create successfull image background is to make sure the path of the image is correct and you disable the border so there is no default border around the button. The next thing is to include the style display:block, this will force the button display in block mode according to the size you specify.

There is a quick web button generator you can use and there are about 140 colors to choose. Click this Web Button Generator link to see more details.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.