นี่คือโค้ดสำหรับการสร้างปุ่ม Next และ Previous (ถัดไปและก่อนหน้า) ด้วย CSS
ตัวอย่าง
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> a { text-decoration: none; display: inline-block; padding: 20px; font-size: 35px; width: 40px; text-align: center; } .back:hover { background-color: #ddd; color: black; } .next:hover { background-color: rgb(121, 37, 133); color: white; } .back { border-radius: 50%; background-color: #acacac; color: black; } .next { border-radius: 50%; background-color: rgb(68, 30, 112); color: white; } </style> </head> <body> <h1>ตัวอย่างปุ่ม Previous และ Next</h1> <a href="#" class="back">‹</a> <a href="#" class="next">›</a> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
