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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.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;

  &:hover,
  &:focus,
  &:active {
    background-color: transparent;
    color: DodgerBlue;
    outline: 0;
  }
}
.pc-btn-div {
  padding-top: 1.5em;
}
</style>
<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>
</div>

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

.pdf .docx