Published on: 20 July, 2013

How to style Image Submit Button using CSS

Posted by andy | 1788 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.
Related Articles
Published on: 20 May, 2016
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.
Published on: 31 January, 2016
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 the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.
Related Tutorials
Published on: 10 August, 2013
z-index is a css property that allows to position an object/element in front/behind of other elements.