It’s nice to style your buttons with CSS. – For anchor tags, this is easy todo, if you use the sliding doors CSS technique.
But it gets nasty when you want to style the submit button, specially if you want the same results in all modern browsers.

What I often see, is in this case, that people create the submit button via an anchor tag as well. The onsubmit action will be added dynamicly via Javascript. – Sure this works, but when people disable Javascript (and people do), you can not submit the form. – Bad accessibility.

The input type submit button is the worse button to style. But there is also a button tag, which can contain a type=submit. This button tag, can contain child tags, just as you do with an anchor tag.
Please see my solution below.

You can download the image files:
left main button image | right side button image

html:

<p>
<a class="button" href="#"><span class="right"><span class="inner">Ok</span></span></a>
</p>
<p>
<button type="submit" class="button" href="#"><span class="right"><span class="inner">Submit</span></span></button>
</p>

css:

.button {
    background: none;
    clear: both;
    cursor: pointer;
    color: #444;
    display: inline-block;
    font: normal 12px arial, sans-serif;
    overflow: hidden;
    text-decoration: none;
    whitespace: no-wrap;
}

.button .inner {
   background: transparent url(../siteimg/submit-button-img-span.gif) no-repeat scroll top left;
   float: left;
}

.button .right {
    background: transparent url('../siteimg/submit-button-img-right.gif') no-repeat scroll top right;
	float: left;
	padding: 0 18px 0 0;
}

a.button span {
	padding: 5px 0 5px 18px;
}

button.button {
	border: none;
	padding: 0;
}

button.button span {
	height: 24px;
	line-height: 24px;
	padding: 0 0 0 15px;
}

.button:active span, .button:hover span {
	color: #000;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

Check my demo.

1. Do not use much styles. If you print out a webpage you don’t want to print colors! (unless to color hyperlinks). Keep it plain and simple and write a short print stylesheet.
   
2. Make sure you named your (2nd) stylesheet for printing: print.css
   And give it the ‘media’ attribute print:

   <link rel="stylesheet" type="text/css" href="print.css" media="print" />

   
   

3. Use a good readable font. I would say a “serif” 12pt font and ofcourse keep it black.

   body { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }

   
   

4. It should be clear when a hyperlink is printed. Therefore keep links underlined. You can even color it blue.

   a { text-decoration : underline; color : #0000ff; }

   
   

5. Do not print out layout parts, navigation, javascript or flash animations.

   #navigation, #headerImage { display: none; }

   
   

6. This is a handy trick: With these styles you can set a page break for printing before or after:
   Possible attributes are: always (print page break) | auto (default – page break where page ends) | left | right.

   H1 {page-break-after: auto}
   H2 {page-break-before: always}

   
   

7. Another handy trick, is to print the URL after an underlined hyperlink:

   a:link:after, a:visited:after { content: " (" attr(href) ")"; }

   
   

Do you like those iTunes styled tabels? These tabels give you a nice overview since every odd and even row contains a different color.

But when your tabel contains dynamic data, you don’t know how many and which rows you have to style with an odd or even color class.

Styling odd and even rows, can be done by using CSS 3, write pseudo class notations.

table tbody tr:nth-child(even) { background: #f1f5fa; }
table tbody tr:nth-child(odd) { background: #fff; } 

Ofcourse and unfortunately not all browsers (*IE(eek)*) support CSS 3.

Read below, how to do this with jQuery. You can write this in less then 5 lines.
You will only need to download JQuery Javascript framework and including it in your webproject.

Here are the files you will need:

The HTML to create a accessible tabel:

<table>
 <thead>
  <tr>
   <th>Head 1</th>
   <th>Head 2</th>
   <th>Head 3</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Cell 1</td>
   <td>Cell 2</td>
   <td>Cell 3</td>
  </tr>
  <tr>
   <td>Cell 4</td>
   <td>Cell 5</td>
   <td>Cell 6</td>
  </tr>
  <tr>
   <td>Cell 7</td>
   <td>Cell 8</td>
   <td>Cell 9</td>
  </tr>
 </tbody>
</table>

The styles for a iTunes generic tabel style:

table { background-color: #fff; border: 1px solid #ddd; empty-cells: show; font-size: 90%; margin: 10px 0 20px 20px; padding: 4px; text-align: left; width: 650px; }
table caption { color: #777; margin: 0 0 5px 0; padding: 0; text-align: center; text-transform: uppercase; }
table thead th { border: 0; border-bottom: 1px solid #ddd; color: #000; font-size: 90%; padding: 3px; margin: 0 0 5px 0; text-align: left; }
table tbody tr { background-color: #fff; }
table tbody tr:hover { background-color: #3D80DF !important; color: #fff; }
table tbody td { color: #000; padding: 2px; border: 0; }
table tbody tr:hover td { color: #fff; } 

jQuery, where you will pick all the odd table rows and give it the blue iTunes color:

//JQuery functions
$(document).ready(function(){
	//odd even table cells.
	$("tr:odd").css("background-color", "#F1F5FA");
});

Last friday Internet Explorer 8 was launched as an official release. This will mean that lots of people will finally use it.

Allthough IE8 passed the ACID2 test, again a new browser can be painfull for the webdeveloper to support multi-browsers.
Luckily there are also IE8 CSS stylesheet hacks:

.test{
     color:blue;
     //color:red;
}

With this hack, all browsers will skip the line with color: red, since this is a comment line (before the property). Except for Internet Explorer. IE8 ignores it, and just change the color to red, while other browsers keep the color blue.

But there is more!
IE8 Standards-Mode Only:

.test { color /*\**/: blue\9 }

All IE versions, including IE8 Standards Mode:

.test { color: blue\9 }

Another trick, to make css styles for IE8 only, is by using conditional comment tags in your HTML:

<!--[if gte IE 8]>
      <style type="text/css">
      body {
       color: #0000ff;
       background-color: #000000;
      }
      </style>
<![endif]-->

Use this CSS stylesheet for your custom S-Control pages.
Your mod will look like a real Salesforce styled page. (cases tab style)

body {
	font-family:'Arial','Helvetica',sans-serif;
	font-size:75%;
	line-height: 1.6em;
	background: #fff;
	padding: 0;
}

h1,  h2 { font-size: 14px; font-weight: bold; }
h3 { font-size: 100%; background: #DDB929; display: block; padding: 1px; color: #fff; }
h4 { font-size: 80%; background: #DDB929; display: block; padding: 1px; color: #fff; }

label { font-weight: bold; text-align: right;  }
span { }
strong { font-weight: bold; color: #f00; }

a { color: #000; }

hr { color: #eeecd1;  border: 1px solid;}

div {
	background: #F3F3EC;
	margin: 5px;
	padding: 5px;
	border: 2px Solid #eeecd1;
	width: 95%;
}

li{
	 display: block;
	 margin: 2px 2px 2px -20px;
}

table {
	width: 100%;
	background: #F3F3EC;
	font-size: 12px;
	border-top: 5px Solid #E5C130;
	border-bottom: 2px Solid #E5C130;
	border-left: 1px Solid #eeecd1;
	border-right: 1px Solid #eeecd1;
	padding: 0px;
	margin: 0px 0px 10px 0px;
}

th { background: #eeecd1; height: 19px; width: 20%; } // TODO dynamic

td {
	height: 19px;
	border-bottom: 1px solid #eeecd1;
	width: 20%;
	margin: 0px 2px 0px 2px;
	padding: 0px 5px 0px 2px;
}

.classy0 { background-color: #eeecd1; }

button, .btn {
	background-image:url('/img/bgButton.gif');
	background-position:left top;
	background-repeat:repeat-x;
	border-color:-moz-use-text-color #5C5D61 rgb(92, 93, 97) -moz-use-text-color;
	border-style:none solid solid none;
	border-width:medium 1px 1px medium;
	color:#FFFFFF;
	cursor:pointer;
	display:inline;
	font-family:'Verdana','Geneva',sans-serif;
	font-size:80%;
	font-weight:bold;
	padding:1px 3px;
}

.relatedListBlock{
	float: left;
}

.end {
	clear: both;
}

.hide {
  	display: none;
}