This tip focuses on using CSS to replace the background images on INPUT button types. Take a look at the button for my Comment Box, it has plain text over a custom background image controlled by CSS. Below is a breakdown of the code:
Download the Complete Source Files. CSS Tip: CSS Image Buttons
1. Create the button image:
2. Our HTML for the Button:
3. Our CSS:
Set the graphic button Width & Height
.ButtonBlue {
width: 150px;
height: 50px;
}
Add the Background image reference, we don’t want it to repeat if overflown, as well as give it White text color
.ButtonBlue {
width: 150px;
height: 50px;
background: url(../images/btn_blue.gif) no-repeat top left;
color: #FFFFFF;
}
Finally, important to remove the border, without it, makes for an ugly rectangluar bordered button. Set the Font Size relavant to default size in “body” tag, and make it Bold.
.ButtonBlue {
width: 150px;
height: 50px;
background: url(../images/btn_blue.gif) no-repeat top left;
color: #FFFFFF;
border: 0px;
font-size: 1.6em;
font-weight: bold;
}
Enjoy!
10 Responses to “CSS Tip: CSS Image Buttons”
Trackbacks/Pingbacks
-
[...] Max Design: A big amount of tutorials on using CSS. Some other articles and sites include: 1 2 3 4 5 6 7 8 9 Today, my dad’s car battery died at school. So we had to get a jump from a teacher [...]
-
[...] Source [...]
Leave a Reply
Join the Blog!
Categories
- ASP.NET 1
- CMS 3
- CSS 8
- Flash 2
- Freebies 3
- IIS 1
- Interviews 1
- Mobile 5
- Android 1
- Rants 6
- Web & Internet 7
- Web Design 15
- Web Hosting 1
- Web Servers 1
- Website Design Anatomy 2
- WordPress Themes 2
I just did a button like this for one of my clients, Creative Logic Media. Worked really well and really made the form standout.
Cool! I’m glad it worked for you Amber. Share the link here.
This turotial is great for fixed width buttons, how to have similar buttons with random size name ?
Keven that’s a good idea for the next post. I will write that up within the next few days and let you know when it’s posted.
a few questions:
to make variable width, would you have to use a nested span and sliding doors?
to add a down state would you use .ButtonBlue:hover ? IE wouldnt accept this surely?
Great article.
Sorry for the delayed response, been working on the launch of 4 new websites…
Sliding doors can be done but requires a few hacks for IE6. I’ve seen other methods use Javascript to achieve variable widths.
On mouseover… yes you can use .ButtonBlue:hover but IE6 won’t play nice
thank you a lot !!
Great tip Antonio. For anyone that needs tab or button images to go along with this tutorial, try out the demo of buttonGADGET at http://buttongenerator.us/