zen button construction kit 2.0
Bookmark and Share

Button Preview Big Button Preview Small Button preview (big and small) with the current selection
 
Save/Load Button Template Font & Text Icons Credits
  • Load preset Save preset Info   


    Preview language Info
    Image format Info GIF   JPEG   PNG  
    Languages to output
    Bulgarian Bulgarian   Catalan Catalan   Chinese Chinese   Croatian Croatian   Czech Czech  
    Danish Danish   Dutch Dutch   English English   Estonian Estonian   Finnish Finnish  
    French French   German German   Greek Greek   Hebrew Hebrew   Hungarian Hungarian  
    Icelandic Icelandic   Italian Italian   Lithuanian Lithuanian   Norwegian Norwegian   Polish Polish  
    Portuguese Portuguese   Romanian Romanian   Russian Russian   Slovak Slovak   Spanish Spanish  
    Swedish Swedish   Turkish Turkish  
    Preview Button Layout
  • Button template
    Gear 1 Blue Plain   Gear White Plain   Glossy Web2 Green   Plain Mustard
    Gear 2 Cyan Plain   Glass Green   Glossy Web2 Grey   Plain Ocean
    Gear 3 Green Plain   Glass Greyblue   Glossy Web2 Orange   Plain Orange
    Gear 4 Yellow Plain   Glass Orange   Metal And Glass Blue   Plain Red
    Gear 5 Orange Plain   Glossy Bluegrey   Plain Beige   Stylish Arrow Blue
    Gear 6 Red Plain   Glossy Green   Plain Beige Brown   Stylish Arrow Green
    Gear 7 Fuchsia Plain   Glossy Grey   Plain Blue   Stylish Arrow Orange
    Gear 8 Purple Plain   Glossy Orange   Plain Dark Green   Stylish Blue
    Gear Grey Left   Glossy Purple   Plain Dark Purple   Stylish Green
    Gear Grey Plain   Glossy Simple White   Plain Green   Stylish Orange
    Gear Grey Right   Glossy Web2 Blue   Plain Grey   U Axxess Green
    Hue & Saturation
    Hue:  
    Saturation:  
    Brightness:  
    Preview Button Layout
  • Font color (hex)
     
    Background color (hex)
     
    Text effect Outline   Color:

    Drop shadow
    Text attribute
    Font
    Font sizes
    Big button:       Small button:  
    Text border
    Big button:       Small button:  
    Offsets
    Big x:

         		     Big y: 
    		    Small x:

          		    Small y: 
    Preview Button Layout
  • Icon set      
    Icon alignment left   right
    Icon offset y
    Big button:       Small button:  
    Icon space
    Preview Button Layout
  • The aim and purpose of zen button construction kit 2.1 is to automatically generate all Zen-Cart shop buttons in one go by utilizing a button text file and button templates, for several languages if necessary.

    © mediakitchen.de
    Credits: original button class by Rainer Langheiter
    Sliders by CARPE Design | Silk and flag icons by Mark James | color pickers by Mark Kahn | some button designs from bittbox.com
Hint: this action does NOT output your buttons, but saves the settings you made in a file that you can load again later so you can pick up and continue working with them. Use the button 'create buttons' to actually output your button set.
Hint: use this drop down to check if the selected font supports a language you want to output. If the preview shows no or wrong text for your language, please choose another font.
Hint: the standard image format used by Zen-Cart is GIF. If you want to use something else, you will have to edit the shop file 'includes/languages/english/button_names.php'.
Hint: the 'hue' and 'saturation' values only have an effect on color buttons. The slider 'brightness' affects any button type.
Hint: If you want to create buttons in languages with special non-Latin UTF-8 characters like Russian, Bulgarian, Greek etc, please choose a basic system font, e.g. Arial, Tahoma or Verdana. For Chinese you will have to use the font 'Heiti'.
Hint: this value defines the distance between the text/icon and the left and right button end caps.
Hint: use this to correctly position the text on the button. This is for fine tuning purposes.
Hint: use the value to correctly position the icon on the buttons. It influences the vertical alignment.
Hint: this value defines the distance between the icon and the text.
Reset HSB values.
Select Color:
Click to Select Web Safe Color
R:
G:
B:
Only Web Colors