Page Widget How to - Create Pure CSS Paginate

Question

We would like to know how to create Pure CSS Paginate.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
a.pager span {<!--from ww w.j ava2 s.c o m-->
  display: inline-block;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  background: lightgrey;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}

a.pager:hover span, a.active span {
  background: black;
}
</style>
</head>
<body>
  <a href="#" class="pager active"><span></span></a>
  <a href="#" class="pager"><span></span></a>
  <a href="#" class="pager"><span></span></a>
  <a href="#" class="pager"><span></span></a>
  <a href="#" class="pager"><span></span></a>
</body>
</html>

The code above is rendered as follows: