The following CSS can be used to display the links in beautiful square blocks with a mouseover effect.
Just copy and paste the below code in a notepad or your favourite editor and save it as
.html file and view it with a browser. You can take the styles(within the <style></style> tag) and insert into the head section of your web page or your .css file. The content inside the <body></body> is important, you must have the similar format in your web page.
You can play with the styles to customize it to match your requirement.
<html>
<head>
<title>CSS used in Pagination</title>
<style>
#pagin a
{
font-family:Tahoma;
font-size:11px;
display:block;
float:left;
cursor:pointer;
color:#00c;
text-decoration:none;
display:inline-block;
border:1px solid #ccc;
padding:.3em .7em;
margin:0 .38em 0 0;
text-align:center
}
#pagin a:hover
{
background:#f0f7e8;
border:1px solid #83bc46
}
#pagin a.sel
{
color:#333;
font-weight:normal;
background:#f0f7e8;
cursor: default;
border:1px solid #83bc46
}
</style>
</head>
<body>
<div id="pagin">
<a class="sel">1</a><a href="/a.asp">2</a>
<a href="/b.asp">3</a>
</div>
</body>
</html>
Send Message
Advertise