นี่คือโค้ดสำหรับการสร้างปุ่มรูปแคปซูล (Pill Buttons) ด้วย CSS
ตัวอย่าง
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> button { font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; background-color: rgb(193, 255, 236); border: none; color: rgb(0, 0, 0); padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; font-size: 30px; border-radius: 32px; } button:hover { background-color: #9affe1; } </style> </head> <body> <h1>ตัวอย่าง Pill Buttons</h1> <button>Button 1</button> <button>Button 2</button> <div></div> <button>Button 3</button> <button>Button 4</button> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
