How to Create a Button in SharePoint 2013 Or 2016

2013 and 2016 SharePoint Button Tutorial

Buttons are another way we can provide intuitive navigation for our site users.

Situations where the use of buttons may be appropriate:

1. To provide easy access to other related SharePoint sites (that may be several clicks away). For example, when implementing sites, you may choose to add a help button that links to a Technical FAQ Wiki.

2. To provide navigation in a Web Part Page (WPP). Unless we access the code and ‘unblock’ the Quick Launch bar, we don’t get that navigational tool on a Web Part Page. Using breadcrumbs to navigate out of a WPP can also be confusing to novice SharePoint users because the breadcrumbs (of course) map to the library holding this file. Because of this, whenever I create a WPP I like to give users a ‘home’ button to give them easy access back to where they came from.

3. To provide links into specific list and library views. Remember when you change views in a list or library, the URL also changes. You can use that path to provide users a link directly to a filtered view– for example, to provide a view of items that have been recently added –or to provide direct access a new list item form.

4. To provide access to an external site or a network directory. If you have an address for it, you can link to it (it doesn’t have to be another SharePoint site).

The point is to provide your site users with navigation that is intuitive and easy to use. Buttons certainly fit the bill on both criteria. Ok, have I sparked your interest yet? The below steps will demonstrate how to add a button using SharePoint 2013 and 2016.

Get the Add a New Item Link

This is pretty simple. Just hover over the new item link, right click, then select Copy Shortcut.

Get the Add a New Item Link for Document Libraries

For Document libraries this step is a little bit harder. You will notice that hovering over the new document options as well as the Upload Document ribbon control does not produce a link.

So what we need to do is press F12 do bring up the Developer Tools in Internet Explorer. Now select the Network tab and press the Green Play Button.

Click “Upload Document” in the ribbon.

You will now see all of the URLs that are requested by the page. The very first one is the one we are interested in, as this is the Upload.aspx page, where we can upload files from. Select that entry, right click, then select Copy URL.

https://www.YOURURLGOESHERE.com/tech/ec/_layouts/15/listform.aspx?PageType=8&ListId=%7B2F318620%2D4A33%2D4231%2DA5B0%2DC0ABBF88C5
EA%7D&RootFolder=

https://www.YOURURLGOESHERE.com/tech/ec/_layouts/15/Upload.aspx?List=%7B4A8FCC70%2D477F%2D4AE4%2D9F4D%2D00A6191F01AB%7D&
RootFolder=%2Ftech%2Fec%2FAddNewDocDemo&Source=https%3A%2F%2F
stargate%2Emetrostarsystems%2Ecom%2Ftech%2Fec%2FAddNewDocDemo%2F
Forms%2FAllItems%2Easpx&IsDlg=1

You should now have a URL for either the list, library, or both.

Create a Button Link

Now we are ready to create the button on a page to link to the new item or upload document page.

On the page in either the Content Editor Web Part (CEWP) or in Page Content select Insert>Picture>From Computer. Now select the button image you want to insert it onto the page.