สร้างปุ่ม button สวยๆ ด้วย CSS แบบไล่สี และโค้งมน

สอนสร้างปุ่ม button สวยๆ ด้วย CSS แบบไล่สี และโค้งมน บทความนี้แนะนำการใช้คำสั่งของ CSS ในการปรับแต่งปุ่ม input type button ให้มีความสวยงาม โดยการไล่สีพื้นหลังของปุ่ม และทำให้ปุ่มโค้งมน สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง สร้างปุ่ม button สวยๆ ด้วย CSS แบบไล่สี และโค้งมน

<style>
    .btn {
        background: #6C8FFF;
        border: solid 1px #6C8FFF;
        background: linear-gradient(180deg, #6C8FFF 0%, #2A4395 35%, #09184B 100%);
        border-radius: 8px;
        color: white;
        padding: .75rem 1.5rem;
    }
</style>

<input type="button" class="btn" value="ปุ่ม Button">

ปุ่ม button สวยๆ โดยการใช้คำสั่ง linear-gradient สำหรับไล่สีพื้นหลังของปุ่ม และใช้คำสั่ง border-radius เพื่อปรับให้มุมของปุ่มมีความโค้งมน