There are numerous places where a form button may be shown to the end user, something like
     <input  type="submit" value="Update" />

The problem is that there is little you can do to format these with CSS, you cannot make rounded edges, nice backgrounds, etc.

In some places in the generated HTML HotDoodle can instead of an <input> like the above generate something like

<table class='blueshiny' border='0' align='left' cellspacing='0' cellpadding='0'> 
  <tr> 
    <td class='blueshiny_start'>&nbsp;</td>
    <td class='blueshiny_middle'><a href=' ... '>View Options</a></td>
    <td class='blueshiny_end'>&nbsp;</td>
  </tr>
</table>

where the various "blueshiny" CSS classes allow for the additons of rounded edges and such. The "blueshiny" name would change for different fancy button formatting.

There are 2 challenges to this approach:

1. How to get the CSS for all of the "blueshiny" classes into the current theme
2. How to get the HTML generator to generate the alternative button, and which class to use, and on which specific buttons?

The HotDoodle looks directory, browseable at http://www.hotdoodle.com/hotdoodle_engine/looks has a buttons directory with a library of fancy button styling.   Click into the styling you want to see how to include it.

Try Browsing Now

The easiest way to get the fancy CSS into your own theme is to use an include file that has it. The HotDoodle looks directory (browseable at http://www.hotdoodle.com/hotdoodle_engine/looks) has a buttons directory with a library of fancy button styling to be included.   To include "blueshiny", for example, you would simply insert the following line where you want those declarations inserted:
    {include file='buttons/blueshiny/blueshiny.tpl'}

 You don't have to memorize this, it is listed when you browse into the fancy button directory.

If you are interested in the particulars for the CSS for a button, browse the .tpl file in the fancy button directory.

Don't load more than needed:
You may load as many buttons as you want into the TPL, but loading moe than needed slows the site.

You may have inserted into your custom theme the CSS for fancy buttons, but it will do no good unless the HTML generator constructs HTML that references those classes. Not every theme has fancy buttons, and different fancy stylings may be needed in different places.

HotDoodle has divided its buttons into various named groupings, and each grouping can be assigned a fancy button styling to be used.   For example, to use "blueshiny" for the quantity fields in a product catalog, you would include the following line in your look's .tpl file:
    {declare_theme_var var='button_prodcat_qnty_class' val='blueshiny'}

As before,  you don't have to memorize this, it is listed when you browse into the fancy button directory.

The custom theme screen has a "Browse Used Buttons" that will show all buttons loaded into the last saved TPL and how they are assigned to be used by the code.

If you do not see your button, the most common reason is getting the file path wrong on the {include ...} statement. To debug, examine the CSS and look for "Start buttons/NewClassName". You can also examine the expanded CSS that follows to verify that classnames and URLs came out OK.

If you see your button listed, but it is not properly drawn, try using "F5" to do a deep browser referesh.

Button assignments are cached by HotDoodle, so if you change the assignments in one browser another browser may not notice. To drop the cache, in the other browser open a new session, visit the site wuth ?hdsid=new appended to the URL -- this starts a new HotDoodle session.

The below declarations are an example where blueshiny buttons are used for product catalog quantities, and opshiny buttons are used for everything else.

   /* Enable smallblueshiny buttons */ 
   {include file='buttons/blueshiny/blueshiny.tpl'} 
   {declare_theme_var var='button_prodcat_qnty_class' val='blueshiny'} 
 
   /* Enable opshiny buttons */ 
   {include file='buttons/opshiny/opshiny.tpl'} 
   {declare_theme_var var='button_unspecified_class' val='opshiny'}

To create a new fancy button:

1. Copy a button directory to NewClassName
2. Rename the tpl file to NewClassName.tpl (case sensitive)
3. Alter start.gif, middle.gif, and end.gif as desired.
   Resizing is fine, as long as the CSS works with it
   Using other image types is fine
   You may add images if needed by the CSS
4. Edit NewClassName.tpl
5. Make the second line read
     {assign var='buttonclass' value='NewClassName'}
6. Modify the CSS as needed
7. It is instantly available — you may need to use F5 to force a CSS browser refresh.
   
   
8. Deploy it in a site, capture a sample image, and store in the NewClassName dir as An_Example.gif (case sensitive).