Professional Website Development:
Website Design, Development and Promotion

Do you want a cheap website?

Perhaps, based on a free content management system (CMS), overloaded with controls, settings and options you will never ever use?

Limited to the availability of add-ons and plugins which rarely fit your needs out of a box?

Well, you should try searching for other people who may be interested in this kind of a job.

At Site-o-Matic we like to do stylish high quality bespoke websites, fully tailored to your needs and desires.

Have a look at our previous works and decide for yourself if you want us to do your website.

How to Style Input and File Browse Buttons with CSS

8

 November 

2010

CSS Buttons

When you get to style a website you often want to customize the looks of buttons on your input forms.

While some people recommend to leave buttons alone, arguing that users expect all the buttons to look and behave universally the same, I can not agree with this.

A website is meant to have a style and the buttons are supposed to be a part of that style.

To style a button properly, we need to remember that, ideally, it has 3 states:

  • Normal State

    normally assumed right when the page loads

  • Mouseover State

    assumed when mouse pointer moves over the button

  • Pressed State

    assumed when mouse button is hold down while pointer was over the button

Each of these states requires some CSS. And, at least, Normal, Mouseover and Pressed need their own graphics.

The idea is simple: we give each button a distinct id or class, set dimensions for it and set it to have a background.

For this example we have this button in the code:

<input type='button' value='Send' id='my_custom_button' />

or

<input type='submit' value='Submit' id='my_custom_button' />

The styling for a submit button and for just a button is completely the same.

Normal State

Here we need to define the dimensions - width and height - of the button as well as border, background (the actual button image) and style the button text. This is the CSS I have used for this example:

#my_custom_button {

width: 93px;

height: 28px;

background: url('button_normal.png') 0 0 no-repeat;

border:none;

padding: 0 4px 8px 0;

font-weight:bold

}

Note the padding. You need to change these values depending on your button. My button has shade and because of it I had to move the text a little to the up and left. The ordering of these properties is: UP RIGHT BOTTOM LEFT.

Mouseover (Hover) State

#my_custom_button:hover {

background: url('button_hover.png') 0 0 no-repeat;

}

Pressed State

#my_custom_button:active {

background: url('button_pressed.png') 0 0 no-repeat;

}

Example Button Styling

This is a normal button:

This a fancy customised button:

File Browse Button

This case is totally different from normal buttons. All browsers display it in their own way:

  • result image

    Google Chrome

  • result image

    Mozilla Firefox

  • result image

    Microsoft Internet Explorer 8

  • result image

    Opera

It isn't possible to style a file browse button directly via css and there is no clean and nice way. So we have to use a workaround.

The theory is that you create a div and put your file browse button into this div, give the background image to the div rather than to the file browse and set div overflow to be hidden. Next thing is to turn file browse button's opacity all the way down to zero.

The way it works is that you basically put the image which you want under the button and make button invisible. Whenever you click on it, it looks like as if you clicked the image, but, in fact, you have clicked the file browse button.

<div id='file_browse_wrapper'>

<input type='file' id='file_browse'>

</div>

Now the CSS to go with it would be:

#file_browse_wrapper {

width: 93px;

height: 28px;

background: url('file_browse_normal.png') 0 0 no-repeat;

border:none;

overflow:hidden;

}

#file_browse_wrapper:hover {

background: url('file_browse_hover.png') 0 0 no-repeat;

}

#file_browse_wrapper:active {

background: url('file_browse_pressed.png') 0 0 no-repeat;

}

#file_browse{

margin-left:-145px;

opacity:0;

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

}

Note how we don't mention padding and font-weight, as opposed to normal button styling, because the text has to be a part of the image.

Another point to note here is that Internet Explorer does not understand opacity attribute so we have to use some weird styling of it's own.

You might be wondering, why do we have to move the actual file browse button (which is transparent) to the left by 145px. The answer is that when you click on our customised button, the mouse pointer is in fact above text field of the original file browse (Chrome is the only exception). And while Chrome, Safari and Firefox display Browse window no matter where you click - on the button itself or on the textfield, Internet Explorer and Opera will not react to single clicks on the text field. Hence we move the original file browse button to the left so that it is right on top of the button graphics.

Example File Browse Button Styling

Have a look at the final result of our styling.

This is a normal file browse button:

This a fancy customised file browse button button:

Download an example html form with css and sample images.

Hope you have enjoyed this tutorial : )

css button style file browse button style button

Ajax Image Upload

Ajax Image Upload

In this article I will describe the process of uploading images (or any files) to the server without having to refresh the page and how to change the page dynamically, when the file upload...

Read more

TinEye - Search the Web by Image the Same Way You Search Google by Text

TinEye - Search the Web by Image the Same Way You Search Google by Text

Imagine you have a thumbnail of a very nice image. This thumbnail is small and probably quite low on quality. It's named something like x87z87bsxz9.jpg and you have totally no idea how to even...

Read more

Potential Problems of PHPBB3 Forum Indexation

Potential Problems of PHPBB3 Forum Indexation

Some time ago an acquaintance of mine has approached me and asked if I could fix their forum (let's call it X) indexation issues. Having no real experience back then I replied, that I can try,...

Read more

View all posts

21 March 2012 08:55

Anonymous

Great trick, thanks!

16 April 2012 20:50

Anonymous

Very nice button!

21 April 2012 16:48

Anonymous

but U don't see the path of the image after selecting. That' not fine !

21 April 2012 17:08

Eugene @ Site-o-Matic

It really is up to what you need. This tutorial shows you how to make the button look nice. If you need to also print out the selected file name, you can add a listener to the browse file input, so that whenever it changes, another field on you page prints the name of the file.

20 June 2012 18:41

Anonymous

You can't click on the right side of the styled button. The browse won't come up (chrome)

20 June 2012 18:47

Eugene @ Site-o-Matic

Are you sure? I have just tried the very right side of the button (as soon as it changes color) and it works on chrome. Is the button just above (just before "Download an example..." link) not work for you?

7 July 2012 08:08

vinayak

Thanks Its very important!

16 July 2012 16:01

Anonymous

zd

15 August 2012 20:19

dam_dam

Very nice trick. Thank you very much !

8 January 2013 09:20

Vahid Mehrabi

Great trick, thank you.

28 March 2013 04:45

Musab Hussain.Pakistan

Thanks A Lot ,i find what i want from last three months...thank you very much

27 April 2013 08:55

ayub majeed, pakistan

really really thanks about it, very nice trick......

2 May 2013 10:27

Chets

Nice work and its really help a lot to developers

29 May 2013 07:24

Shreekumar

Really enjoyed the stuff!!!

12 November 2013 16:49

Bjorn Jornvig, Denmark

Thanks a lot, that saved me a log of time.

9 February 2014 17:40

kundan

good....hopeit works

26 February 2015 05:50

Anonymous

nice thnks

4 March 2015 06:51

Priyanka

I like it! Thank you for the post. Here is another example rhetorical to this blog. Check it out!
http://webmuch.com/how-to-customize-a-file-upload-button-using-css3-html5-and-javascript/

6 June 2015 03:58

Anonymous

Nice

6 June 2015 03:58

Anonymous

Nice

6 June 2015 03:58

Rahul

asdghahfjhashgklajhsdfkjh

22 July 2015 13:13

Anonymous

aAA

17 October 2015 08:50

33

ee

17 October 2015 08:50

Anonymous

cxggfjjhhhhii

31 October 2015 19:06

Ron Spoonemore

very good tutorial. Need to make your web page easier to read, for us old 70 something folks

14 July 2016 21:08

Anonymous

,,,,,

Name:

Your comment: