title: Custom style for wordpress pagination
body: <p>I have my custom pagination in html and i want to apply all of its css to my custom wordpress pagination.Here is <a href="https://jsfiddle.net/r56oseu0/" rel="nofollow">jsfiddle</a> demo.</p>
  
  <p>Can you please help me out with this.All I want to do is make the same <a href="https://jsfiddle.net/r56oseu0/" rel="nofollow">pagination</a> for wordpress. Thanx guys.</p>
  
  <p>Here is what I did until now:</p>
  
  <pre><code>&lt;section class="pager m-50"&gt;
      &lt;div class="row"&gt;
          &lt;div&gt;
              &lt;?php
                  global $wp_query;
                  $big = 999999999; // need an unlikely integer
                  $links = paginate_links( array(
                      'base'      =&gt; str_replace( $big, '%#%', get_pagenum_link( $big ) ),
                      'format'    =&gt; '?paged=%#%',
                      'current'   =&gt; max( 1, get_query_var('paged') ),
                      'total'     =&gt; $wp_query-&gt;max_num_pages,
                      'prev_text' =&gt; __('&lt;div class="btn-gold pull-left"&gt;←&lt;/div&gt;','multi'),
                      'next_text' =&gt; __('&lt;div class="btn-gold pull-right"&gt;→&lt;/div&gt;','multi'),
                      'type'      =&gt; 'array',
                  ));
              ?&gt;
              &lt;?php if (count($links) &gt; 0) : ?&gt;
              &lt;div class="archive-navigation"&gt;
                  &lt;?php foreach ($links as $link) : ?&gt;
                  &lt;?php echo $link; ?&gt;
                  &lt;?php endforeach; ?&gt;
              &lt;/div&gt;
              &lt;?php endif ?&gt;&lt;!-- End of blog-pagination --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And what I've done so far for wordpress styles is down here:</p>
  
  <pre><code>/*-- pager --*/
  .pager a {
      font-size: 14px;
      border: none;
      text-decoration:none;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      -ms-border-radius: 0px;
      border-radius: 0px;
      color: #000;
      -webkit-transition: all 0.1s; 
      -moz-transition: all 0.1s; 
      -o-transition: all 0.1s;
      -ms-transition: all 0.1s; 
      transition: all 0.1s;
  } 
  .pager a.page-numbers:hover {
      background: none;
      margin-top: -15px;
      font-size: 30px;
      color: #b3a06c;
  }
  span.page-numbers.current {
      margin-top: -15px;
      font-size: 30px;
      color: #b3a06c;
  }
  
  
  /*-- pager --*/
  div.btn-gold.pull-right {
      position: relative;
      padding: 0;
      margin: 0;
      font-size: 14px;
      color: #000;
      text-decoration: none;
      -webkit-transition: all 0.3s;  
      -moz-transition: all 0.3s; 
      -o-transition: all 0.3s;
      -ms-transition: all 0.3s; 
      transition: all 0.3s;
  }
  div.btn-gold.pull-right.next, div.btn-gold.pull-right.prev {    
      right: 0;
      -webkit-transform: rotateZ(45deg);
      -moz-transform: rotateZ(45deg);
      -ms-transform: rotateZ(45deg);
      -o-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
  }
  div.btn-gold.pull-right.prev  {
      left: 0;
  }
  div.btn-gold.pull-right.next:hover {    
      right: 15px;
  }
  div.btn-gold.pull-right.prev {
      left: 15px;
  }
  </code></pre>