Simple Posts Pagination in WordPress - custom style

Here is the code, Add the following code in your functions.php file

function pagination($pages = '', $range = 4)
{  
 $showitems = ($range * 2)+1;  

 global $paged;
 if(empty($paged)) $paged = 1;

 if($pages == '')
 {
  global $wp_query;
  $pages = $wp_query->max_num_pages;
  if(!$pages)
  {
   $pages = 1;
  }
 }   

 if(1 != $pages)
 {
  echo "<ul class='pagination'>";
  if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<li><a href='".get_pagenum_link(1)."'><i class='fa fa-angle-left' aria-hidden='true'></i></a></li>";
  // if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>&lsaquo; Previous</a>";

  for ($i=1; $i <= $pages; $i++)
  {
   if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
   {
    echo ($paged == $i)? "<li class=\"active\"><a href='javascript:void(0)'>".$i."</a></li>":"<li><a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a></li>";
   }
  }

  //if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next &rsaquo;</a>";  
  if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<li><a href='".get_pagenum_link($pages)."'><i class='fa fa-angle-right' aria-hidden='true'></i></a></li>";
  echo "</ul>\n";
 }
}

Here is the code for display pagination

<?php
 $my_query = null;
 $my_query = new WP_Query($args);
 if( $my_query->have_posts() ) {
  while ($my_query->have_posts()) : $my_query->the_post(); 
 
  endwhile;
 }
 if (function_exists("pagination")) {
  pagination($my_query->max_num_pages);
 }
?> 

Here is the css

.pagination>li.active a:hover, .pagination>li.active a, .pagination>li a:hover
{
 background:#5d5d5d;
 border-radius:3px;
 border:1px solid #5d5d5d;
 color:#fff
}
.pagination>li
{
 padding-left: 3px;
    display: inline-block;
    box-shadow: 2px 1px 11px #eee;
 border-radius:3px;
}
.pagination>li>a, .pagination>li>span
{
 border-radius:3px;
 color:#5d5d5d;
 background: #f9f9f9; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#f9f9f9, #ededed); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#f9f9f9, #ededed); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#f9f9f9, #ededed); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#f9f9f9, #ededed)
}