Buttons on your website
Your website functions and features include buttons for user-interactivity. You can easily create your own unique buttons that will support the look and feel of your website layout and color theme. Custom buttons add finesse to your website and enhance your brand.
You can design and replace your website buttons at any time, without getting into the website code. Simply create a new image for the button and upload to replace with the existing one.
Get familiar with your website buttons
Browse your website and take a look at the various buttons. Right-click (PC) or command-click (Mac) on any button and choose "Image Properties" form the menu that appears. A dialog window will open, displaying the button image name, format and dimensions.
You can choose to design one button at a time, upload to your website and refresh the web page to see how it looks, or create all buttons and upload at once. You can choose to design only buttons of those features which are used by visitors on your website. This article includes a list and examples of all buttons available in the dbDirector website platform.
Your website button images are saved in the Images folder which is located in the Website Theme directory. You can access this directory by logging into the control panel and going to Website>Files.
How to design a button and upload onto the website
- Create your button with any graphic design program, such as Adobe Photoshop, Illustrator or CorelDRAW.
- Save your newly designed button on your computer in a GIF format in the exact name of the button which you are replacing, for example: "search_btn.gif".
- Log in to your dbDirector control panel and go to Website>Files.
- Click on the website Theme folder (your website name appears before the word "Theme").
- Click the Images folder.
- Click the Upload button. In the dialog that appears, click the Browse button.
- Use the dialog window to locate your newly designed button on your computer, select it, and click the "Open" button.
- Click the "Ok" button in the dialog window and allow a few seconds for the file to get uploaded to the website. That's it! your new button is now being used on your website.
Notice not to confuse the Images folder which is located inside the Theme directory (where the button images are saved) with the other Images folder which is located directly under the root (where you can save images for content pages such as your blog.)
Guidelines for designing website buttons
Short and relevant messages
Buttons should consist of one or two words that tell the user what will happen once the button is clicked.
Standards and user-friendly words
The internet world developed its own set of words which became a standard. Each language has adopted its translation for common functions such as "login/logout", "refresh", etc. A good practice is to use familiar words for familiar actions. For example, you may choose to use the word "Back" rather than "Return" on a button which takes the user back to the previous page.
Also, think of your target audience who visit your website. Choose friendly words which are easy to understand. for example, "Web Address" rather than "URL" and "Display Information" rather than "Render Data".
Size and format
Make buttons just big enough to be easily readable by the user. Save the button image files in a GIF format, according to the name of the button, for example: "submit_btn.gif"
troubleshooting: I uploaded my new button yet the old button is still being displayed.
Follow these steps to troubleshot and solve the problem:
- Open a new browser window and close all other browser windows. Clear the browser temporary internet files (cache files). Enter the web address of your website and navigate to the page where the button should appear. If the old button still appears, continue to the next step below.
- Check your new button file name and extension on your computer. Make sure the file name matches the file name of the button on the website and that the extension is *.gif, for example: "mybutton_btn.gif". If the file name is correct, then try uploading the image again and afterwards, repeat step 1.
- Check that you are uploading the file to the correct folder in the website file manager. Image buttons should be uploaded to "Website Theme / Images / ".
| Button image file name | Sample 1 | Sample 2 |
| addtocartqview_btn.gif |  | |
| addtocart_btn.gif |  |  |
| addtogiftregistry_btn.gif |  | |
| addtowishlist_btn.gif |  |  |
| add_btn.gif |  | |
| adjuststorecredit_btn.gif |  | |
| applypromo_btn.gif |  |  |
| backtoorders_btn.gif |  | |
| back_btn.gif |  | |
| calculate_btn.gif |  |  |
| cancel_btn.gif |  | |
| cart_grp.gif |  |  |
| changepass_btn.gif |  | |
| checkout2_btn.gif |  |  |
| checkoutminicart_btn.gif |  |  |
| checkout_btn.gif |  |  |
| Comments.gif |  | |
| continueshopping_btn.gif |  |  |
| continue_btn.gif |  | |
| deletethiswishlist_btn.gif |  | |
| delete_btn.gif |  | |
| downloadablestocart_btn.gif |  |  |
| download_btn.gif |  |  |
| edit_btn.gif |  | |
| express_checkout_btn.gif |  | |
| find_btn.gif |  | |
| giftcard_cart.jpg |  | |
| googlecheckout_btn.gif |  | |
| isnew.gif |  | |
| loading.gif |  | |
| login_btn.gif |  |  |
| logo.png |  | |
| logo2.gif |  | |
| logoemail.gif |  | |
| logoorder.gif |  | |
| logothermal.gif |  | |
| makeprimary_btn.gif |  | |
| managewishlists_btn.gif |  | |
| navdivider.gif |  | |
| navdivider2.gif |  | |
| new_btn.gif |  | |
| nextrma_btn.gif |  | |
| noimage.gif |  | |
| noimage_big.gif |  | |
| noswatch.gif |  | |
| paypalcheckout_btn.gif |  | |
| print_btn.gif |  | |
| proceedcheckout_btn.gif |  |  |
| processingorder.gif |  | |
| quickadd_btn.gif |  | |
| quicksearch_btn.gif |  |  |
| redeem_btn.gif |  | |
| removeaddress_btn.gif |  | |
| remove_btn.gif |  |  |
| rmarequest_btn.gif |  | |
| save_btn.gif |  | |
| search_btn.gif |  |  |
| send_btn.gif |  | |
| shareviaemail_btn.gif |  |  |
| shareviafacebook_btn.gif |  |  |
| signup_btn.gif |  |  |
| submitcommentprod_btn.gif |  | |
| submitcomment_btn.gif |  |  |
| submitorder_btn.gif |  | |
| submitrma_request.gif |  | |
| submit_btn.gif |  |  |
| subnavdivider.gif |  | |
| trackpackage_btn.gif |  | |
| twitthis.gif |  |  |
| viewdetails_btn.gif |  | |
| viewrma_btn.gif |  | |
Coming Next: Positioning buttons and special effects on buttons with CSS.