Tag Archives: SharePoint Buttons

Bootstrap, CSS, SharePoint 2013

How to create a button in SharePoint 2013

So there are a few ways of creating custom buttons in SharePoint however, I like my buttons to be noticeable so I tend not to use the standard button however, I’ve shown below how to create buttons using basicbutton, Bootstrap & CSS.

Buttons1

Basic Button:

Button2

<input type=button onClick=”parent.location=’http://sharepoint-oc/'” value=’Click Here!’>

CSS Button:

Button4

<style>
.link {
background-color: #6666FF;
color: white;
padding: 12px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

.link:hover {
background-color: #C1C1FF;
}
</style>
<a href=”http://sharepoint-oc/” class=”link”>Click Here!</a>

Bootstrap Button:

Button3

<button type=”button” onclick=”parent.location=’http://sharepoint-oc'” class=”btn btn-primary btn-lg”>Click Here!</button>
JQuery, SharePoint 2013, SharePoint Designer

How to change SharePoint button display text

Changing the text for a button within SharePoint can be done through JQuery. Some of the requests I’ve had require this to say ‘Send’, ‘Submit’, ‘Cancel Request’ & ‘Back’.

To begin with, open the form you want this change made, for me, I’d like this on the NewForm. The below form is a copy of the new form that I’ve created in SharePoint Designer.

Buttontext

Edit the NewForm page and add a Script Editor Web Part. Copy the code below and paste in the script editor Web Part.  If you’d like the save value to be something other than save, make sure you change the part where I’ve written ‘Send’.

<script>
$(document).ready(function()
{
$(“input[value$=’Save’]”).attr(‘value’, “Send”);
});
</script>

Buttontext2

Save the changes and stop editing the page. Go back into the NewForm (New Item) page and check the changes.

Buttontext3

You can also edit the form in SharePoint Designer and place the code on the form that way.