Add a simple CSS Button to SharePoint site

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.

5 thoughts on “Add a simple CSS Button to SharePoint site”

  1. Hey I was wondering how you get the buttons to display horizontally instead of vertically by just re-pasting the code.

  2. How do you add a link to the button?Heather your site is great!! Thanks for all the info!!!!

  3. JosephPosted @ 5/31/2007 7:30 PMHey 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 🙂

Comments are closed.