Skip navigation
jds zigzag
jds zigzag
Currently Being Moderated

Canned Buttons for Links

Oct 4, 2011 5:06 PM

I want to use buttons for Links but don't want to try to create them myself.  Where can I find stock Buttons with script that I can drop into my html and css?

 

I want a series of vertical buttons that might look something like this:

 

Vertical Link.jpg

 

I will stack them vertically in a non-scrolling Sidebar on the left side of the page.  Thanks.

 

jds

516 Views   5 Replies   Latest reply: Nancy O., Oct 8, 2011 12:52 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Oct 4, 2011 5:51 PM   in reply to jds zigzag
    Report

    Using images for navigation menus (other than backgrounds) is not an ideal scenario for a lot of usability and maintenance reasons.  The biggest drawback is that each time your site changes, you have to re-craft a whole new set of images for the various link states (ick!). 

     

    My advice is to stick with HTML unordered lists <ul> <li> for site menus. 

     

    Example:

    <ul id="navigation">

    <li class="home">Home</a></li>

    <li class="about">About</a></li>

    <li class="search">Search</a></li>

    <li class="photos">Photos</a></li>

    <li class="contact">Contact</a></li>

    </ul>

              

    With the power of CSS you can style your navigation lists to look like buttons. 

    http://css.maxdesign.com.au/listamatic/vertical13.htm

     

    With CSS3 transform and IE filters, you can rotate them.

    http://davidwalsh.name/css-transform-rotate

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

     
    |
    Mark as:
  • Curtis_E_Flush
    Currently Being Moderated
    2. Curtis_E_Flush,
    Oct 4, 2011 9:22 PM   in reply to Nancy O.
    Report

    Good point about having to craft new buttons.

    If I'm going to use images in a navigation menu, I use a block display, and I will make something 1px by whatever the height is for a background and have it repeat across the block for each nav item. That way I retain my HTML menu, and if I need to change a color scheme, it's not that tough to do.

     
    |
    Mark as:
  • jds zigzag
    Currently Being Moderated
    3. jds zigzag,
    Oct 7, 2011 7:45 PM   in reply to Nancy O.
    Report

    Thanks, Nancy.  I have tried a few things to implement the rotated text from the david walsh website.  I have been successful in rotating the entire Sidebar, then also just the top part with all four Links.  But have not figured out how to just rotate the text within a single Link.  Can you tell me really simply how to do that?

     

    Also, there is no mention about Safari and its compatibility in Safari.  Off the top of your head, do you know if it works in Safari?  If not, I will just try it after I figure out how to rotate the text.

     

    Jim

     
    |
    Mark as:
  • Curtis_E_Flush
    Currently Being Moderated
    4. Curtis_E_Flush,
    Oct 8, 2011 11:08 AM   in reply to jds zigzag
    Report

    Safari shouldn't have any problem with rotated text. As long as what you do is XHTML and CSS compliant, it should render fine in Safari.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    5. Nancy O.,
    Oct 8, 2011 12:52 PM   in reply to jds zigzag
    Report

    If you check this DEMO, it works in all modern browsers that are web standards compliant.

    http://alt-web.com/DEMOS/Rotated-menu.shtml

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points