In this section we will explain how you could easily add a “Download” button to your Jekyll based Static Website.

To _includes folder add puzzlescloud.html file with the following content (feel free to adjust it).

<link rel="stylesheet" href="">
.pc-btn {
  background-color: DodgerBlue;
  border: 2px solid DodgerBlue;
  border-radius: 1.75em;
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.035em;
  line-height: 1.2;
  padding: 0.5em 1.5em;
  text-align: center;
  text-decoration: none;
  -webkit-transition: .3s ease;
  transition: .3s ease;
  vertical-align: middle;

  &:active {
    background-color: transparent;
    color: DodgerBlue;
    outline: 0;
.pc-btn-div {
  padding-top: 1.5em;
<div class="pc-btn-div">
  <a class="pc-btn" href="/puzzlescloud/puzzlescloud.pdf" download><i class="fa fa-download"></i> .pdf </a>
  <a class="pc-btn" href="/puzzlescloud/puzzlescloud.docx" download><i class="fa fa-download"></i> .docx </a>

Files puzzlescloud.pdf and puzzlescloud.docx need to be pushed by our web app to /puzzlescloud folder

In _layouts folder to your <file name>.html file place to appropriate place the following line:

{ % include puzzlescloud.html % }

It will produce the buttons like below