Article Categories
Archives
Post Categories
  Jump to Information for:
Search:  
Here is some simple CSS code to add a button on your SharePoint page. The link has a class assigned to it so the default SharePoint styles won't control the appearance of the link text. This code does differ slightly than what you would do for a regular non-SharePoint web page.

One implementation of this code is to add it to a Content Editor Web Part to display custom nav on a SharePoint page. Modify the look and feel of it to make a custom set of links or subnav on the page.

Here is the code:

<STYLE>
.Button a:link, .Button a:visited, .Button a:hover {border: black solid; border-width: 1px; padding: 3px 5px; width: 130px}
.Button a.ButtonLink, .Button a.ButtonLink:link, .Button a.ButtonLink:visited {background: #339900; color: white; text-decoration: none}
.Button a.ButtonLink:hover {background: #99ff99; color: black; text-decoration: none}
</STYLE>

<DIV class=Button><A class=ButtonLink href="InsertLink">Button Text</A></DIV>

The code wouldn't play nice with the post, but the end result looks a lot like the buttons I use in the left nav bar of this site.

posted on Monday, September 12, 2005 8:48 AM
Comments
  •  re: Add a simple CSS Button to SharePoint site
    Joseph
    Posted @ 5/31/2007 7:30 PM
    Hey I was wondering how you get the buttons to display horizontally instead of vertically by just re-pasting the code.
  •  re: Add a simple CSS Button to SharePoint site
    mulan
    Posted @ 3/11/2008 1:18 AM
    where can i find the content Editor Web Part? is it where i will post the code? thanks
  •  re: Add a simple CSS Button to SharePoint site
    Claudia
    Posted @ 7/16/2008 12:30 PM
    How do you add a link to the button?
    Heather your site is great!! Thanks for all the info!!!!
  •  re: Add a simple CSS Button to SharePoint site
    Clayton
    Posted @ 9/25/2009 1:54 PM
    Joseph,

    Did you ever figure out how to make these buttons displayed horizontally?
  •  re: Add a simple CSS Button to SharePoint site
    eman
    Posted @ 2/3/2010 9:31 AM
    Joseph
    Posted @ 5/31/2007 7:30 PM
    Hey I was wondering how you get the buttons to display horizontally instead of vertically by just re-pasting the code.

    eman:
    I guess you would add table cells and position the buttons in.
    Have not tried it yet. If you manage, please post the code here for everybody.

    Thanks :)
Title  
Name  
Email (never displayed)
Url
Comments   
ALL COMMENTS ARE MODERATED! Sorry for the inconvenience, but it is how I keep all of the spam and advertisers out. I moderate comments about once a week and your comment will appear soon. Thanks for posting!
Please add 4 and 6 and type the answer here:

Copyright © 2005-2008. Heather Solomon.
Site design by Heather Solomon

Blog Stats:
Posts - 388
Stories - 39
Comments - 1796
Trackbacks - 183