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