Design Classy Buttons for Your Web Pages




           Create a button
              like this




                      ...
In A Nutshell …
                                     There’s a FREE
1. Create the button graphics       Web site to do thi...
1. Create the button graphics
                                      GlassyButtons.com




   Experiment with
 the various ...
2. Download the final files



When finished, click
this to save the files




                    Save the ZIP file
     ...
What do you need from the ZIP file?
You always get three formats:
GIF, JPG and PNG. You only need
one of them.
If you’re p...
3. Upload to your Web server                     You might need
                                                   your We...
4. Add to a Web page                                       You might need
                                                ...
5. Make it change with “mouse over”                 Remember: This
                                                    ste...
6. Link this to a Web page
Insert a link tag around
  the image, like this:


    <a href=quot;blah.htmlquot;><img …></a>
...
That’s it!




         www.FirstStepCommunity.info
Did you find this tutorial useful?

• Community of like-minded experts
• Discussion forum
• Monthly teleseminars
• On-line...
Upcoming SlideShare
Loading in …5
×

Tutorial: Create Classy Buttons for Your Web Site

2,450 views
2,409 views

Published on

Learn how to create classy 3-d buttons with rounded corners, and add them to your Web site. Ideal for action buttons on Web pages.

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
2,450
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Tutorial: Create Classy Buttons for Your Web Site

  1. 1. Design Classy Buttons for Your Web Pages Create a button like this www.FirstStepCommunity.info
  2. 2. In A Nutshell … There’s a FREE 1. Create the button graphics Web site to do this 2. Download them to your computer 3. Upload them to your Web server 4. Add the button to any page on your Web site 5. Make the button change when This step is optional the user’s mouse goes over it 6. Link the button to a Web page www.FirstStepCommunity.info
  3. 3. 1. Create the button graphics GlassyButtons.com Experiment with the various options on this page Every option has a Help button www.FirstStepCommunity.info
  4. 4. 2. Download the final files When finished, click this to save the files Save the ZIP file on your computer www.FirstStepCommunity.info
  5. 5. What do you need from the ZIP file? You always get three formats: GIF, JPG and PNG. You only need one of them. If you’re putting this on a textured background, JPG won’t work. Apart from that, just choose the smallest file size. You also get a button_0 and a button_1 for each type. If you want the button to change when the mouse moves over it, keep both. If not, keep only button_1 Extract the files you want and give them more meaningful names (e.g. order-now0.gif,order-now1.gif) www.FirstStepCommunity.info
  6. 6. 3. Upload to your Web server You might need your Webmaster’s help with this step If you’ve got a First Step Web site, first choose “List Documents” And then choose UPLOAD A FILE www.FirstStepCommunity.info
  7. 7. 4. Add to a Web page You might need your Webmaster’s help with this step If you’ve got a First Step Web site, insert an <img> tag into the page Here’s a bigger version of this code for clarity <img src=quot;docs/order-now1.gifquot; border=0> www.FirstStepCommunity.info
  8. 8. 5. Make it change with “mouse over” Remember: This step is optional Same as previous page, but use this code instead: <img src=quot;docs/order-now0.gifquot; border=0 onMouseover=quot;this.src='docs/order-now1.gif'quot; onMouseout=quot;this.src='docs/order-now0.gif'quot;> VERY IMPORTANT You MUST combine these three lines into one long line, separated by spaces www.FirstStepCommunity.info
  9. 9. 6. Link this to a Web page Insert a link tag around the image, like this: <a href=quot;blah.htmlquot;><img …></a> This comes first. This bit is is Replace “blah.html” with from the d th Ad o the real Web previous bi t t d en page address page the www.FirstStepCommunity.info
  10. 10. That’s it! www.FirstStepCommunity.info
  11. 11. Did you find this tutorial useful? • Community of like-minded experts • Discussion forum • Monthly teleseminars • On-line tutorials • Resource library Join th e • Monthly audio programs First S tep • E-book of the month Memb e Co m m r unity • Special member prices www.FirstStepCommunity.info www.FirstStepCommunity.info

×