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:

.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}

<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.