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!!!!
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 5 and 7 and type the answer here:

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

Blog Stats:
Posts - 377
Stories - 38
Comments - 1556
Trackbacks - 182