Live Code Editor Version 2.0

Hướng dẫn tạo Alert Buttons với HTML và CSS - ĐỊnh dạng giao diện RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style type="text/css">
        .btn {
            border: none; /* loại bỏ border  */
            color: white; /* thay đổi màu chữ */
            padding: 14px 28px; /* thiết lập padding */
            cursor: pointer; /* thêm hiệu ứng khi di chuột lên button */
        }
        .success {
            background-color: #4CAF50;  /* thay đổi màu nền thành green */
        }
        .success:hover {
            background-color: #46a049;
        }

.info {
            background-color: #2196F3; /* thay đổi màu nền thành blue */
        } 
        .info:hover {
            background: #0b7dda;
        }

.warning {
            background-color: #ff9800; /* thay đổi màu nền thành Orange  */
        } 
        .warning:hover {
            background: #e68a00;
        }

.danger {
            background-color: #f44336; /* thay đổi màu nền thành Red   */
        } 
        .danger:hover {
            background: #da190b;
        }
    </style>
    <body> 
        <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>
    </body>
</html>