<div class=“pagination clearfix mb1 mt4”>

<div class="left">
  {% if paginator.previous_page %}
    {% if paginator.page == 2 %}
      <a href="{{ site.baseurl }}/">
        <span class="left-circle-arrow"></span>
      </a>
    {% else %}
      <a href="{{ paginator.previous_page_path }}">
        <span class="left-circle-arrow"></span>
      </a>
    {% endif %}
  {% else %}
      <a href="">
        <span class="left-circle-arrow arrow-disabled"></span>
      </a>
  {% endif %}
</div>
<div class="right">
  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path }}">
      <span class="right-circle-arrow"></span>
    </a>
  {% else %}
    <a href="">
      <span class="right-circle-arrow arrow-disabled"></span>
    </a>
  {% endif %}
</div>

</div>

<style> a {

display: inline-block;
border-radius: 50%;

}

.left-circle-arrow {

background: #000;
display: inline-block;
width: 4em;
height: 4em;
border: 0.5em solid #000;
border-radius: 50%;
margin-right: 1.5em;

}

.left-circle-arrow:after {

content: '';
      display: inline-block;
margin-top: .2em;
margin-right: -1.5em;
width: 3.5em;
height: 3.5em;
border-bottom: 0.3em solid #fff;
border-left: 0.3em solid #fff;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);

}

.right-circle-arrow {

background: black;
display: inline-block;
width: 4em;
height: 4em;
border: 0.5em solid #000;
border-radius: 50%;
margin-left: 1.5em;

}

.right-circle-arrow:after {

content: '';
      display: inline-block;
margin-top: .2em;
margin-left: -1.5em;
width: 3.5em;
height: 3.5em;
border-top: 0.3em solid #fff;
border-right: 0.3em solid #fff;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);

}

.arrow-disabled {

background: WhiteSmoke;
border-color: WhiteSmoke;

}

</style>