I am pretty green to using CSS & HTML to customize sites within SharePoint. I created buttons & I am now trying to create a hyperlink for those buttons to navigate to another SharePoint site. I need to have the button when clicked to open a SharePoint site based on its URL. I have added this into a Content editor webpart that links to my SharePoint Code doc library.

<!DOCTYPE html>
  .button {
   display: inline-block;
   border-radius: 4px;
   background-color: #1E90FF;
   border: none;
   color: #FFFFFF;
   text-align: center;
   font-size: 15px;
   padding: 20px;
   width: 200px;
   transition: all 0.5s;
   cursor: pointer;
  margin: 5px;
 .button span {
   cursor: pointer;
   display: inline-block;
   position: relative;
   transition: 0.5s;
 .button span:after {
   content: '\00bb';
   position: absolute;
   opacity: 0;
   top: 0;
   right: -20px;
   transition: 0.5s;
 .button:UTM span {
   padding-right: 25px;
 .button:UTM span:after {
  opacity: 1;
  right: 0;}
 <button class="button" style="verticalalign:middle"><span>UTM   </span></button>
  • 1
    please add your current code Commented Jul 20, 2017 at 23:21
  • @M.Qassas I have edited the original question to include the code
    – SHARE.Newb
    Commented Jul 21, 2017 at 18:03
  • DO you need to have a link button to navigate you to another SharePoint site from the current page Commented Jul 21, 2017 at 18:05
  • I don't necessarily HAVE to include a link button. I just prefer the look/feel of a button rather than a plain underlined word & link.
    – SHARE.Newb
    Commented Jul 21, 2017 at 18:09
  • Okay, no problem, but your question still unclear, please confirm your requirements, you now have the above HTML code and you need let the above button when it clicked open a SharePoint site based on its URL, Right? Commented Jul 21, 2017 at 18:14

1 Answer 1


Try to use input control with type="button" and at onclick event go to your SharePoint Site.

<input type="button" onclick="location.href='http://yourSharePoint URL';" value="Go to SharePoint Site" class="button" style="verticalalign:middle" />

Alternative solution

    function visitsite(){
<button class="button" style="verticalalign:middle" onclick="visitsite();">Visit SP Site</button>
  • So, I input the alternative solution you submitted into a script editor web part, just to try it out to see if both would work. The code works works within the script editor. But then when I go to insert it onto the site. The button then does not work anymore. Any thoughts on why? Do I need to be doing this in SharePoint Designer to be more effective?
    – SHARE.Newb
    Commented Jul 21, 2017 at 22:52
  • 1
    @SHARE.Newb Do you tried to use the first solution? by the way, what do you mean with "when I go to insert it onto the site"? Commented Jul 21, 2017 at 22:57
  • @SHARE.Newb When it worked for you, please don't forget to Mark this answer as accepted to be helpful for future visitors. Thank You! Commented Jul 25, 2017 at 0:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.