วิธีการ - ปุ่มแจ้งเตือน
เรียนรู้วิธีจัดรูปแบบปุ่ม "แจ้งเตือน" ด้วย CSS
วิธีจัดสไตล์ปุ่มการแจ้งเตือน
ขั้นตอนที่ 1) เพิ่ม HTML:
ตัวอย่าง
<button class="btn success">Success</button>
<button class="btn
info">Info</button>
<button class="btn warning">Warning</button>
<button
class="btn danger">Danger</button>
<button class="btn
default">Default</button>
ขั้นตอนที่ 2) เพิ่ม CSS:
ตัวอย่าง
.btn {
border: none; /* Remove borders */
color: white;
/* Add a text color */
padding: 14px 28px; /* Add some padding */
cursor: pointer;
/* Add a pointer cursor on mouse-over */
}
.success {background-color: #04AA6D;} /*
Green */
.success:hover {background-color: #46a049;}
.info
{background-color: #2196F3;} /* Blue */
.info:hover
{background: #0b7dda;}
.warning {background-color: #ff9800;} /* Orange */
.warning:hover
{background: #e68a00;}
.danger {background-color: #f44336;} /* Red */
.danger:hover {background: #da190b;}
.default {background-color:
#e7e7e7; color: black;} /* Gray */
.default:hover {background: #ddd;}
ไปที่ บทช่วย สอนปุ่ม CSS ของเรา เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการจัดรูปแบบปุ่ม