CSS3 buttons and header styling

Box content

Even with CSS2 these buttons and headers look beautiful but will miss the rounded corners.
Quite often images are used to make box headers and buttons look nice but here is a way with using a single image to make boxes look like the example below. Another advantage is that you dynamically can assign a color which is very handy for creating a theme based website/webapplication.

The overlay image on the content background also gives the box that extra better look, again a small image similar to the header overlay image but higher.

This technology has been used in the WebSoftware Job Card Tracking System as well as in other system developed by A-Vision.

Box header title - bottom black to transparent

Box content

Even with CSS2 these buttons and headers look beautiful but will miss the rounded corners.
Quite often images are used to make box headers and buttons look nice but here is a way with using a single image to make boxes look like the example below. Another advantage is that you dynamically can assign a color which is very handy for creating a theme based website/webapplication.

The overlay image on the content background also gives the box that extra better look, again a small image similar to the header overlay image but higher.

This technology has been used in the WebSoftware Job Card Tracking System as well as in other system developed by A-Vision.

<?php
/*******************************************************************************
*
* © 2010 Copyright A-Vision / WebSoftware
*
* File description :       Web site / application
* 
* Created by       :       Arnold Velzel
* Created on       :       21/11/2010
*
* Last changed by  :       Arnold Velzel
* Last changed on  :       <LastChanged>
* 
*******************************************************************************/
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>CSS3 buttons and header styling</title>

</head>
<body>

<style type="text/css">
<!-- 
* {
 font-family:Tahoma,sans-serif;
 font-size:12pt;
}

div.boxes {
 /* CUSTOM SIZING */
 width:815px;margin-left:auto;margin-right:auto;
}

div.box {
 margin-top:10px;
 border:1px solid #0C5E97;
 border-radius:10px;
 background-color:#CEDEEA;

 /* CUSTOM SIZING */
 width:400px;
}
div.box div.header,
div.box div.darkheader {
 background:#0C5E97 url(overlay-1.png) center top repeat-x;
 border-radius:9px 9px 0px 0px;
 border-bottom:1px solid #0C5E97;
 color:#E6EEF4;

 /* HEADER BACKGROUP SHADOW */
 font-weight:bold;
 text-shadow:#444 2px 2px 3px;

 /* CUSTOMG SIZING */
 padding:3px;padding-left:10px;
}
div.box div.darkheader {
 background:#0C5E97 url(overlay-2.png) center bottom repeat-x;
}

div.box div.content {
 background:transparent url(fading.png) center top repeat-x;
 color:#0C5E97;

 /* CUSTOMG SIZING */
 padding:3px;padding-left:10px;
}

div.box div.footer {
 color:#0C5E97;
 border-top:1px dotted #0C5E97;
 /* for a dark background footer
 background:#0C5E97 url(overlay-2.png) center bottom repeat-x;
 border-radius:0px 0px 9px 9px;
 color:#E6EEF4;
 /* for a darck background footer */

 /* CUSTOMG SIZING */
 padding:3px;padding-left:10px;font-size:70%;
}
-->
</style>

<div class="boxes">
 <div class="box" style="float:left;">
  <div class="header">Box header title - top white to transparent</div>
  <div class="content">
   <b>Box content</b><br /><br />
   Even with CSS2 these buttons and headers look beautiful but will miss the rounded corners.<br />
   Quite often images are used to make box headers and buttons look nice but here is a way with using
   a single image to make boxes look like the example below. Another advantage is that you dynamically
   can assign a color which is very handy for creating a theme based website/webapplication.<br />
   <br />
   The overlay image on the content background also gives the box that extra better look, again a small
   image similar to the header overlay image but higher.<br />
   <br />
   This technology has been used in the 
   <a href="http://www.websoftware.co.nz/web-software-products/jobtracking.html" onclick="window.open(this.href);return(false);">
   <i><b>WebSoftware</b></i> Job Card Tracking System</a> as well as in other system developed by <i><b>
   <a href="http://a-vision.co.nz/Software" onclick="window.open(this.href);return(false);">
   A-Vision</a></b></i>.
  </div>
  <div class="footer">Box footer if required</div>
 </div>
 
 <div class="box" style="float:right;">
  <div class="darkheader">Box header title - bottom black to transparent</div>
  <div class="content">
   <b>Box content</b><br /><br />
   Even with CSS2 these buttons and headers look beautiful but will miss the rounded corners.<br />
   Quite often images are used to make box headers and buttons look nice but here is a way with using
   a single image to make boxes look like the example below. Another advantage is that you dynamically
   can assign a color which is very handy for creating a theme based website/webapplication.<br />
   <br />
   The overlay image on the content background also gives the box that extra better look, again a small
   image similar to the header overlay image but higher.<br />
   <br />
   This technology has been used in the 
   <a href="http://sourceforge.net/projects/jobcardtracking/" onclick="window.open(this.href);return(false);">
   <i><b>WebSoftware</b></i> Job Card Tracking System</a> as well as in other system developed by <i><b>
   <a href="http://a-vision.co.nz/Projects" onclick="window.open(this.href);return(false);">
   A-Vision</a></b></i>.
  </div>
  <div class="footer">Box footer if required</div>
 </div>
</div>

<style type="text/css">
<!-- 
button {
 border-radius:10px;
 border:1px solid #888;
 color:#eee;

 /* CUSTOM SIZING */
 width:150px;margin-left:auto;margin-right:auto;display:block;
 height:30px;margin-top:10px;font-weight:bold;font-size:15px;
}

button[type="submit"] {
 background:#888 url(overlay-1.png) center top repeat-x;
}
button[type="button"] {
 background:#888 url(overlay-2.png) center bottom repeat-x;
}

.color1 {
 background-color:#0C5E97 !important;
 border-color:#0C5E97;
 color:#CEDEEA;
}
.color2 {
 background-color:#408000 !important;
 border-color:#408000;
 color:#D8E5CC;
}
.color3 {
 background-color:#000088 !important;
 border-color:#000088;
 color:#CCCCE5;
}
.color4 {
 background-color:#A33735 !important;
 border-color:#A33735;
 color:#ECD7D6;
}

-->
</style>

<div class="boxes">

 <div class="box" style="float:left;padding-bottom:10px;">
  <button type="submit" class="color0">Submit button</button>
  <button type="submit" class="color1">Submit button</button>
  <button type="submit" class="color2">Submit button</button>
  <button type="submit" class="color3">Submit button</button>
  <button type="submit" class="color4">Submit button</button>
 </div>

 <div class="box" style="float:right;padding-bottom:10px;">
  <button type="button" class="color0">Normal button</button>
  <button type="button" class="color1">Normal button</button>
  <button type="button" class="color2">Normal button</button>
  <button type="button" class="color3">Normal button</button>
  <button type="button" class="color4">Normal button</button>
 </div>

</div>

</body>
</html>