IMG-LOGO

How to style Image Submit Button using CSS?

andy - 20 Jul, 2013 4351 Views 0 Comment

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.

Related Articles

How to style pagination links with CSS?

Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.

Optimizing your site for printing

The easy way to optimize your site for printing is to create a separated external css targeting a media to print only When a printing action is being executed the browser will send over the information from your page to ...