Cacher is the code snippet organizer for pro developers

/* pagination */

.pagination { padding:10px 0; text-align:center; }

.pagination .thumb { display:inline-block; border:1px solid #c9c9c9; height:20px; line-height:20px; min-width:20px; text-align:center; background: #e4e4e4; color:#717171; text-shadow:0 -1px 0 #fff;  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); border-radius: 2px; }

.pagination .thumb:hover { background-color:#fff; color:#323232; cursor:pointer; }

.pagination .thumb.current { background-color:#389EFF; text-shadow:0 1px 0 #2a2a2a; color:#fff; box-shadow: inset 0px 0px 5px 0px rgba(0, 41, 78, 0.4); border-color:#1864ac; }

.pagination .dots { display:inline-block; padding:0 3px; }

.pagination .prev_pg, .pagination .next_pg { }


/* pagination minimalist */


.pagination {padding: 15px 0;text-align: right;border-top: 1px solid #e2e2e2;font-weight: 300;}

.pagination .page-numbers {display:inline-block;line-height:20px;padding: 3px 7px;min-width:20px;text-align:center;color:#717171;}

.pagination .page-numbers:hover {color: #0f80f5;cursor:pointer;}

.pagination .page-numbers.current {color: #0f80f5;}

.pagination .page-numbers.dots { display:inline-block; padding:0 3px; cursor: default;}

.pagination .page-numbers.dots:hover{ color:inherit;}

.pagination .prev_pg, .pagination .next_pg { }

<div class="pagination">
	<span class="prev_pg thumb">&laquo;</span>
	<span class="thumb current">1</span>
	<span class="thumb">2</span>
	<span class="thumb">3</span>
	<span class="thumb">4</span>
	<span class="thumb">5</span>
	<span class="dots">...</span>
	<span class="thumb">50</span>
	<span class="thumb next_pg">&raquo;</span>
</div>