rafasf/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Pagination playground</title>
  <link rel="stylesheet/less" type="text/css" href="pagination.less" />
  <script type="text/javascript" src="less.min.js"></script>
</head>
<body>
  <section class="pagination">
    <ul>
      <li>Go to page:</li>
      <li><input type="text" maxlength="3" size="2" /></li>
      <li><button>Go</button>
    </ul>
    <ul class="pages pages-blue">
      <li class="no-border">←</li>
      <li class="no-border">First</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li class="no-border">Last</li>
      <li class="no-border">→</li>
    </ul>
  </section>
</body>
</html>

## pagination.less
@line-height: 25px;
@element-line-height: 20px;
@border-size: 1px;
@spacing-default: 5px;

* {
  box-sizing: border-box;
}

body {
  font-family: Helvedica, Arial, Verdana, sans-serif;
  font-size: 14px;

  background-color: #fff;
}

ul, li {
  margin: 0;
  padding: 0;
}

.pagination {
  position: relative;
  input[type='text'] {
    outline: none;
  }
}

button {
  cursor: pointer;
  line-height: @element-line-height;

  border: 1px solid #ccc;
  border-radius: 3px;
  outline: none;
  text-shadow: 0 .5px 0 #fff;
  .gradient(white, #ddd);

  &:hover {
    .gradient(white, #acacac);
  }

  &:active {
    .gradient(#0074d9, #7fdbff);
  }
}

.no-border {
  border: 0;
}

ul {
  line-height: @element-line-height;

  list-style: none;
  li {
    display: inline-block;
  }
}

.pages {
  line-height: @line-height - 5px;

  position: absolute;
  right: @spacing-default;
  bottom: 2px;

  cursor: pointer;
  .user-select();

  .pages-theme(#222);

  li {
    font-size: .9em;

    padding-right: @spacing-default;
    padding-left: @spacing-default;

    border: @border-size solid;
    &.no-border {
      .no-border();
    }
  }
}

.pages-blue {
  .pages-theme(#0074d9);
}

.pages-pink {
  .pages-theme(#f012be);
}

.pages-green {
  .pages-theme(#2ecc40);
}

.pages-theme(@color) {
  li {
    color: @color;
    border-color: @color;
    &:hover {
      color: darken(@color, 10);
      border-color: darken(@color, 10);
      text-shadow: 0 .3px 0 @color;
    }
    &:active {
      background-color: lighten(@color, 45);
    }
  }
}

.gradient (@start: #ffffff, @stop: #000000) {
    background-color: @start;
    background-image: -webkit-linear-gradient(top, @start, @stop);
    background-image: -moz-linear-gradient(top, @start, @stop);
    background-image: -o-linear-gradient(top, @start, @stop);
    background-image: -ms-linear-gradient(top, @start, @stop);
    background-image: linear-gradient(top, @start, @stop);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@start', endColorstr='@end',GradientType=0 );
}

.user-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Pagination playground</title>
	<link rel="stylesheet/less" type="text/css" href="pagination.less" />
	<script type="text/javascript" src="less.min.js"></script>
	</head>
	<body>
	<section class="pagination">
	<ul>
	<li>Go to page:</li>
	<li><input type="text" maxlength="3" size="2" /></li>
	<li><button>Go</button>
	</ul>
	<ul class="pages pages-blue">
	<li class="no-border">←</li>
	<li class="no-border">First</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li class="no-border">Last</li>
	<li class="no-border">→</li>
	</ul>
	</section>
	</body>
	</html>
	@line-height: 25px;
	@element-line-height: 20px;
	@border-size: 1px;
	@spacing-default: 5px;

	* {
	box-sizing: border-box;
	}

	body {
	font-family: Helvedica, Arial, Verdana, sans-serif;
	font-size: 14px;

	background-color: #fff;
	}

	ul, li {
	margin: 0;
	padding: 0;
	}

	.pagination {
	position: relative;
	input[type='text'] {
	outline: none;
	}
	}

	button {
	cursor: pointer;
	line-height: @element-line-height;

	border: 1px solid #ccc;
	border-radius: 3px;
	outline: none;
	text-shadow: 0 .5px 0 #fff;
	.gradient(white, #ddd);

	&:hover {
	.gradient(white, #acacac);
	}

	&:active {
	.gradient(#0074d9, #7fdbff);
	}
	}

	.no-border {
	border: 0;
	}

	ul {
	line-height: @element-line-height;

	list-style: none;
	li {
	display: inline-block;
	}
	}

	.pages {
	line-height: @line-height - 5px;

	position: absolute;
	right: @spacing-default;
	bottom: 2px;

	cursor: pointer;
	.user-select();

	.pages-theme(#222);

	li {
	font-size: .9em;

	padding-right: @spacing-default;
	padding-left: @spacing-default;

	border: @border-size solid;
	&.no-border {
	.no-border();
	}
	}
	}

	.pages-blue {
	.pages-theme(#0074d9);
	}

	.pages-pink {
	.pages-theme(#f012be);
	}

	.pages-green {
	.pages-theme(#2ecc40);
	}

	.pages-theme(@color) {
	li {
	color: @color;
	border-color: @color;
	&:hover {
	color: darken(@color, 10);
	border-color: darken(@color, 10);
	text-shadow: 0 .3px 0 @color;
	}
	&:active {
	background-color: lighten(@color, 45);
	}
	}
	}

	.gradient (@start: #ffffff, @stop: #000000) {
	background-color: @start;
	background-image: -webkit-linear-gradient(top, @start, @stop);
	background-image: -moz-linear-gradient(top, @start, @stop);
	background-image: -o-linear-gradient(top, @start, @stop);
	background-image: -ms-linear-gradient(top, @start, @stop);
	background-image: linear-gradient(top, @start, @stop);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@start', endColorstr='@end',GradientType=0 );
	}

	.user-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	}