Page numbers navigation - pure CSS
HTML
<div class='paginate'>
<input type="submit" name="btnPrev" value="Previous" onclick="disableValidationEngine();" class="paging" title="Click to see older posts"/>
<input type="submit" name="btnPage" value="1" class="disableCurrentPage" disabled="disabled"/>
<input type="submit" name="btnPage" value="2" class="paging" onclick="disableValidationEngine();"/>
<input type="submit" name="btnPage" value="3" class="paging" onclick="disableValidationEngine();"/>
<input type="submit" name="btnPage" value="4" class="paging" onclick="disableValidationEngine();"/>
<input type="submit" name="btnPage" value="5" class="paging" onclick="disableValidationEngine();"/>
<input type="submit" name="btnPage" value="6" class="paging" onclick="disableValidationEngine();"/>
<input type="submit" name="btnPage" value="7" class="paging" onclick="disableValidationEngine();"/>
<input type="submit" name="btnPage" value="8" class="paging" onclick="disableValidationEngine();"/>
<input type="submit" name="btnPage" value="9" class="paging" onclick="disableValidationEngine();"/>
<input type="submit" name="btnPage" value="10" class="paging" onclick="disableValidationEngine();"/>
<input type="submit" name="btnNext" value="Next" onclick="disableValidationEngine();" class="paging" title="Click to see newer posts"/>
</div>
CSS
paginate{font-family:Arial,Helvetica,sans-serif;padding:3px;margin:3px;}
.disableCurrentPage{
background-color:#999;color:#FFF;
border:1px solid #999;
text-decoration:none;color:#FFF;
}
.paging{cursor: pointer;
background-color: transparent;border:1px solid #999;
text-decoration:none;
color:#b3bbc5;
}
input[type="submit"]:hover{
border:1px solid #999;color:#000;
}