Alert Button Code

Alert Button

Cara mengatur Alert Buttons dengan CSS. Berikut contoh Alert Buttons :

Alert Buttons

Cara mengatur Alert Buttons

Step 1) Tambahkan HTML:

Contoh :

<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>

Step 2) Tambahkan CSS:

Contoh :

.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: #4CAF50;} /* 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;}