THE BEST WEB DEVELOPER SITE

How TO - Alert Buttons


Learn how to style "alert" buttons with CSS.




How To Style Alert Buttons

Step 1) Add HTML:

Example

<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) Add CSS:

Example

.btn {
    border: none;
    color: white;
    padding: 14px 28px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

.alert {background-color: #F78628;} /* Green */
.alert: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;}
Try it Yourself »

Go to our CSS Buttons Tutorial to learn more about how to style buttons.