The oboutSuperButton with relation to CSS has next structure:

First you should define TABLE.osb_<style> CSS class, where <style> is the oboutSuperButton style
("normal", "xp" etc.).
Example:

table.osb_xp
    { 
      margin:0px; padding:0px;
      width:150px;height:30px;
    }

It was CSS class for the main button's TABLE. This TABLE has inner DIV (we name it "Secondary DIV"). This Secondary DIV should have 7 predefined CSS classes ("disabled", "enabled", "enabled_pressed" and so on as you can see in the upper picture).

table.osb_classic div.disabled
    { 
      margin:0px; padding:0px;
      border-width:1px;
      border-style:solid;
      border-color:#D0D0D0;
    }
table.osb_classic div.enabled
    { 
      margin:0px; padding:0px;
      border-width:1px;
      border-style:solid;
      border-top-color:#FFFFFF;
      border-left-color:#FFFFFF;
      border-bottom-color:#808080;
      border-right-color:#808080;
    }
table.osb_classic div.enabled_hover
    { 
      margin:0px; padding:0px;
      border-width:1px;
      border-style:solid;
      border-top-color:#FFFFFF;
      border-left-color:#FFFFFF;
      border-bottom-color:#808080;
      border-right-color:#808080;
    }
...
table.osb_classic div.active_pressed
    { 
      margin:0px; padding:0px;
      border-width:1px;
      border-style:solid;
      border-top-color:#808080;
      border-left-color:#808080;
      border-bottom-color:#FFFFFF;
      border-right-color:#FFFFFF;
    }

Secondary DIV has inner TABLE. It should have the same 7 predefined CSS classes as Secondary DIV.
Example:

table.osb_pressEffected table.disabled
    { 
      margin:0px; padding:0px;
      border-width:1px;
      border-style:solid;
      border-color:#D0D0D0;
      width:100%;height:100%;
      color:#808080;
      cursor:text;
    }
table.osb_pressEffected table.enabled
    { 
      margin:0px; padding:0px;
      border-width:1px;
      border-style:solid;
      border-color:#D0D0D0;
      width:100%;height:100%;
      color:#404040;
      cursor:pointer;
    }
table.osb_pressEffected table.enabled_hover
    { 
      margin:0px; padding:0px;
      border-width:1px;
      border-style:solid;
      border-color:#D0D0D0;
      width:100%;height:100%;
      color:#404040;
      cursor:pointer;
    }
table.osb_pressEffected table.enabled_pressed
    { 
      margin:0px; padding:0px;
      width:100%;height:100%;
      border-top-style:solid;
      border-top-color:#D0D0D0;
      border-top-width:2px;
      border-left-style:solid;
      border-left-color:#D0D0D0;
      border-left-width:2px;
      color:#404040;
      cursor:pointer;
    }
...

The table has fixed dimension 3x4. Every cell of the table has its own className ("tr1td1", "tr1td2", ... ,"tr3td3", "tr3td4") (12 classes).

! The cell with className "tr2td2" is for button's image placing.
! The cell with className "tr2td3" is for button's text placing.

Example:

...

table.osb_xp table.enabled_pressed td.tr2td2, td.tr2td3
    {
      background-image: url("xp_bgi/xp_np_tr2td23.gif");
      background-repeat: repeat;
      font-size:12px;
      height:20px;
    }


...

All other cells are used for button's "borders". You should define these classes if You want to create very "smart" buttons with background-images. In this case You should define all 12 TD classes for each TABLE' class.
Example:

...
 
table.osb_smooth table.active_pressed td.tr3td1
    {
      height:5px; width:5px;
      background-image: url("smooth_bgi/smooth_a_tr3td1.gif");
    }
table.osb_smooth table.active_pressed td.tr3td2
    {
      height:5px;
      background-image: url("smooth_bgi/smooth_a_tr3td23.gif");
      background-repeat: repeat-x;
    }
table.osb_smooth table.active_pressed td.tr3td3
    {
      height:5px;
      background-image: url("smooth_bgi/smooth_a_tr3td23.gif");
      background-repeat: repeat-x;
    }
table.osb_smooth table.active_pressed td.tr3td4
    {
      height:5px; width:5px;
      background-image: url("smooth_bgi/smooth_a_tr3td4.gif");
    }

...

For simple button You can define only one CSS class for the TABLE's cell.
Example:

table.osb_normal td
    { 
      font-size:12px;
    }

Now let's examine the "normal" SuperButton's skin style (normal.css) for more information.

Define the main table class.

table.osb_normal
    { 
      margin:0px; padding:0px;
      width:150px;height:30px;
    }

For this button skin style the secondary div will have one definition for all 7 classes.

table.osb_normal div.disabled, div.enabled, div.enabled_hover, div.enabled_pressed,
                                      div.active  , div.active_hover  , div.active_pressed
    { 
      margin:0px; padding:0px;
    }

For this button skin style the inner table will have all 7 class definitions.

Define class for enabled button's status when the button isn't pressed or hovered.

table.osb_normal table.enabled
    { 
      margin:0px; padding:0px;
      background-color:#E0E0FF;
      cursor:pointer;
      border-width:1px;
      border-style:solid;
      border-color:#A0A0FF;
      width:100%;height:100%;
      color:#0000FF;
    }

Define class for disabled button's status. It has another values for border-color, background-color, color properies than for enabled status. And so the button in this status looks more colourless.

table.osb_normal table.disabled
    { 
      cursor:text;
      margin:0px; padding:0px;
      background-color:#F0F0FF;
      border-width:1px;
      border-style:solid; border-color:#D0D0FF;
      width:100%;height:100%;
      color:#A0A0A0;
    }

Define class for enabled button's status when the button is hovered. This class differs from the enabled not hovered one by border-color property only. So when we put the mouse pointer over the button, the button changes its border's color.

table.osb_normal table.enabled_hover
    { 
      margin:0px; padding:0px;
      background-color:#E0E0FF;
      cursor:pointer;
      border-width:1px;
      border-style:solid;
      border-color:#0000FF;
      width:100%;height:100%;
      color:#0000FF;
    }

For this skin style we decided the pressed button in enabled and active status look equal. So we made one definition for this case. This definition differs from the enabled hovered and active hovered ones by background-color property only. So when we "press" the button, the button changes its color.

table.osb_normal table.enabled_pressed, table.active_pressed
    { 
      margin:0px; padding:0px;
      cursor:pointer;
      background-color:#A0A0FF;
      border-width:1px;
      border-style:solid;
      border-color:#0000FF;
      width:100%;height:100%;
      color:#0000FF;
    }

Define class for active button's status when the button isn't pressed or hovered. This class differs from the enabled not hovered one by background-color property only. So when the button is set as active, it changes its color.

table.osb_normal table.active
    { 
      margin:0px; padding:0px;
      cursor:pointer;
      background-color:#B0B0FF;
      border-width:1px;
      border-style:solid;
      border-color:#A0A0FF;
      width:100%;height:100%;
      color:#0000FF;
    }

Define class for active button's status when the button is hovered. This class differs from the active not hovered one by border-color property only. So when we put the mouse pointer over the button, the button changes its border's color (the same as for enabled hovered).

table.osb_normal table.active_hover
    { 
      margin:0px; padding:0px;
      cursor:pointer;
      background-color:#B0B0FF;
      border-width:1px;
      border-style:solid;
      border-color:#0000FF;
      width:100%;height:100%;
      color:#0000FF;
    }

The "normal" SuperButton's skin style doesn't use "borders" effect via background images. So we don't need to define every table's cell class (td.tr1td1 etc.). We define one cell class only. It is necessary for font size definition only.

table.osb_normal td
    { 
      font-size:12px;
    }

That's all.