Let's try to create a new simple style for Text Only button with name style1.
We'll create it in  a few steps.

1. Create new folder SuperButton/osb_data/osbSkins/style1.
2. For a simple Text Only button we create three background images in PhotoShop:     .
   We'll name these images:
   
   left - style1_left.gif,
   center - style1_center.gif,
   right - style1_right.gif.
   
   These images should be placed into folder SuperButton/osb_data/osbSkins/style1.
   
   
3. Make a copy of file SuperButton/osb_data/osbSkins/blankTextButton.css from downloaded zip. Rename it to style1.css.
   
   
4. Now edit this CSS file: replace all "blank" text entries with "style1".
   
   
5. Our background images have height 22px, so we edit the first class in CSS file.

   table.osb_style1
       {
         /* set here real height of background images used in cells */
         height:22px;
         margin:0px; padding:0px;
         overflow:visible;
       }

6. Now we edit classes for cells. Left background image has width 8px, right one - 23px.

   table.osb_style1 table td.tr2td1
       {
         /* set here real height and width of background image */
         width:8px;height:22px;
         /* set here url of real background image */
         background-image: url("style1/style1_left.gif");
       }

   table.osb_style1 table td.tr2td3,table.osb_style1 table td.tr2td2
       {
         /* set here real height of background image */
         height:22px;
         /* set here url of real background image */
         background-image: url("style1/style1_center.gif");
         background-repeat:repeat-x;
         /* set here font properties for inner text */
         font-size:12px;font-family:verdana;font-weight:500;
       }

   table.osb_style1 table td.tr2td4
       {
         /* set here real height and width of background image */
         width:23px;height:22px;
         /* set here url of real background image */
         background-image: url("style1/style1_right.gif");
       }

That's all.

Now let's use our new button style

<osb:SuperButton runat="server" Text="Text Button" SkinStyle="style1"
   SkinFolder="/SuperButton/osb_data/osbSkins" ScriptFolder="/SuperButton/osb_data/osbScript"
/>

And we have a button

Hover effect

Let's make our button change its appearance on hover. We'll make it in a few steps.

1. Let the button change its text color on hover, so we add next fragment into our CSS file:

   /* hovered button's inner TABLE */

   table.osb_style1 table.enabled_hover,table.osb_style1 table.active_hover
       {
         /* text color on hover */
         color:#0000FF;
       }

2. Create three new background images for button's hovered status in PhotoShop:     .
   These images should have the same sizes as ones created before. We'll name these images:
   
   left - style1_left_hover.gif,
   center - style1_center_hover.gif,
   right - style1_right_hover.gif.
   
   These images should be placed into folder SuperButton/osb_data/osbSkins/style1.
   
   
3. And now we add next fragment into our CSS file:

   /* hovered cells styles */

   table.osb_style1 table.enabled_hover td.tr2td1,
   table.osb_style1 table.active_hover  td.tr2td1
       {
         background-image: url("style1/style1_left_hover.gif");
       }

   table.osb_style1 table.enabled_hover td.tr2td3, table.osb_style1 table.enabled_hover td.tr2td2,
   table.osb_style1 table.active_hover  td.tr2td3, table.osb_style1 table.active_hover td.tr2td2
       {
         background-image: url("style1/style1_center_hover.gif");
       }

   table.osb_style1 table.enabled_hover td.tr2td4,
   table.osb_style1 table.active_hover  td.tr2td4
       {
         background-image: url("style1/style1_right_hover.gif");
       }
   

Pressed effect

Let's make our button change its appearance on mouse click. We'll make it in a few steps.

1. Let the button change its text color on mouse click, so we add next fragment into our CSS file:

   /* presseded button's inner TABLE */

   table.osb_style1 table.enabled_pressed,table.osb_style1 table.active_pressed
       {
         /* text color on click */
         color:#FFFFFF;
       }

2. Create three new background images for button's pressed status in PhotoShop:     .
   These images should have the same sizes as ones created before. We'll name these images:
   
   left - style1_left_pressed.gif,
   center - style1_center_pressed.gif,
   right - style1_right_pressed.gif.
   
   These images should be placed into folder SuperButton/osb_data/osbSkins/style1.
   
   
3. And now we add next fragment into our CSS file:

   /* pressed cells styles */

   table.osb_style1 table.enabled_pressed td.tr2td1,
   table.osb_style1 table.active_pressed  td.tr2td1
       {
         background-image: url("style1/style1_left_pressed.gif");
       }

   table.osb_style1 table.enabled_pressed td.tr2td3, table.osb_style1 table.enabled_pressed td.tr2td2,
   table.osb_style1 table.active_pressed  td.tr2td3, table.osb_style1 table.active_pressed td.tr2td2
       {
         background-image: url("style1/style1_center_pressed.gif");
       }

   table.osb_style1 table.enabled_pressed td.tr2td4,
   table.osb_style1 table.active_pressed  td.tr2td4
       {
         background-image: url("style1/style1_right_pressed.gif");
       }