CSS border प्रॉपर्टी का उपयोग करके पेजिनेशन लिंक्स पर बॉर्डर जोड़ा जा सकता है, जिससे वे अलग-अलग बटन जैसे दिखते हैं। बॉर्डर स्टाइल (सॉलिड, डैश्ड, डॉटेड), चौड़ाई, और रंग को अनुकूलित किया जा सकता है।
उदाहरण
नीचे दिए गए उदाहरण में, पेजिनेशन लिंक्स पर नारंगी डैश्ड बॉर्डर, होवर प्रभाव, और एक्टिव स्टेट लागू किए गए हैं।
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
display: inline-block;
}
.demo a {
color: red;
padding: 5px 12px;
text-decoration: none;
border-radius: 5px;
transition: background-color 2s;
border: 1px dashed orange;
}
.demo a.active {
background-color: orange;
color: white;
border-radius: 5px;
}
.demo a:hover:not(.active) {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Our Quizzes</h2>
<div class="demo">
<a href="prev.html"><</a>
<a href="quiz1.html">Quiz1</a>
<a href="quiz2.html">Quiz2</a>
<a href="quiz3.html">Quiz3</a>
<a href="quiz4.html" class="active">Quiz4</a>
<a href="next.html">></a>
</div>
</body>
</html>
बॉर्डर स्टाइल विकल्प:
solid- ठोस रेखा (सबसे आम)dashed- धारीदार रेखाdotted- बिंदीदार रेखाdouble- दोहरी रेखाgroove,ridge,inset,outset- 3D प्रभाव
सर्वोत्तम अभ्यास: फ्लेक्सबॉक्स (display: flex; gap: 5px) के साथ border का उपयोग करें बजाय float के।
