Styling a CSS button

Styling a CSS button

The look of an un-styled HTML button will vary by browser...

To display a HTML button without any kind of styling is risky to say the least. Browsers render buttons differently and they certainly do not care if their button fits within your intended site’s look and feel.

When styling buttons it is important to remember that you must change all the elements of the button, or risk seeing an odd half-browser button half-styled Frankenstein. In particular, do not forget to change the border to remove the beveled edges. Some browsers also change the standard cursor – it is good practice to manually set this.

Example:

.orangebutton { 
  background: #faae5c url(btn.png) repeat-x; 
  padding: 5px 10px; 
  border: 1px solid #faae5c; 
  fcolor: #FFF; 
  font-size: 14px; 
  cursor: pointer; 
}

.orangebutton:hover { 
  background: #b0c8e7 url(../images/btn-blue.png) repeat-x; 
  border-color: #b0c8e7; 
}
Please recommend us if you found this article helpful:
Anthony Luxton
Author
Anthony Luxton
Director

Published:
18th August, 2011

Infographics

5 reasons why you need a website
Android usage – Medina Valley Centre
Website success benchmark
View all

Interviews

Interview with Mr Tom Fallick
Interview with Samuel Claxon
Interview with Anthony Luxton
View all

iPad Web Design

Responsive web design example
iPad Javascript hover
Introduction to iPad development
View all

Marketing

Why you should run an e-mail campaign
View all

Print

The intricacies of preparing for print
View all

Search Engine Optimisation

Getting started in guest blogging
Website recommendations for 2013
The importance of site structure for SEO
View all

Web Development Tips & Tricks

Youtube iframe API player undefined Firefox
Show and hide input password field
Pixel-perfect webpages with just CSS
View all

You and Your Website

LinkedIn For Business
How much content is enough?
How often should I update my blog?
View all