How to Style Alert Buttons using CSS?

How to make border popup animation for buttons using CSS ?

How to Save Username And Password in Git?

Styling alert buttons with CSS enhances user experience by making buttons more visually appealing and interactive. We can customize their look using CSS properties like color, padding, and hover effects. In this tutorial, we will focus on how to style “alert” buttons using CSS.

These are the following approaches:

Table of Content

Using Custom CSS
Using SweetAlert2 Library

Using Custom CSS

In this approach, we will utilize custom CSS for layout and styling, along with JavaScript for interactivity.

First, create a basic HTML structure with a container for the main content and a modal for the alert box.
Apply CSS to centre the main content vertically and horizontally using Flexbox. Style the modal to cover the entire viewport and center it using absolute positioning and the transform property.
Implement JavaScript to control the display of the modal. When the button is clicked, show the modal by changing its display property to “block”. Similarly, clicking the close button hides the modal by setting its display property to “none”.
Add event listeners to the “Show Alert” button and the “OK” button to trigger the display and hiding of the modal, respectively.
Customize the modal content, including the alert message, heading, and button, to match the design requirements. Adjust the styles as needed for visual appeal and accessibility.

Example: This example shows the implementation how to style “alert” buttons using custom CSS.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0">
    <title>How to style "alert" buttons using CSS</title>
    <link rel="stylesheet" 
          href="style.css">
</head>
<body>
    <div class="container">
        <h1 class="alert-heading-first">
            Click the button to show the alert..
        </h1>
        <button id="alert-btn">Show Alert</button>
    </div>

    <div id="alert-message-container"
         class="alert-message-container">
      <h2 class="alert-heading-second">
         You clicked the button
      </h2>
      <p class="alert-message">Your form is successfully submitted</p>
      <button id="close-alert-btn">OK</button>
    </div>

    <script>
       let alert_btn =  document.getElementById("alert-btn");
       let alert_message = document.getElementById("alert-message-container");
       let close_alert_btn = document.getElementById("close-alert-btn");

       alert_btn.addEventListener("click", function() {
           alert_message.style.display = 'block'; 
       });

       close_alert_btn.addEventListener("click", function() {
           alert_message.style.display = 'none'; 
       });
    </script>
</body>
</html>

CSS

/* Write CSS Here */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

.container {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 450px;
}

.container h1 {
    margin: 0 0 20px;
    font-size: 24px;
    color: #10ef0c;
}

#alert-btn {
    background-color: #ff5f5f;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

#alert-btn:hover {
    background-color: #ff1f1f;
}

#alert-btn:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(255, 95, 95, 0.5);
}

.alert-message-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 1000;
    display: none;
    width: 500px;
}

.alert-message-container h2 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #34e511;
}

.alert-message-container p {
    margin: 0 0 20px;
    font-size: 16px;
    color: #f0630c;
}

.alert-message-container button {
    background-color: #5f5fff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.alert-message-container button:hover {
    background-color: #1f1fff;
}

.alert-message-container button:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(95, 95, 255, 0.5);
}

Output:

Using SweetAlert2 Library

SweetAlert2 offers an easy solution for creating visually appealing alert boxes with minimal effort. By linking the SweetAlert2 CSS file, developers can easily implement custom alert dialogues with various styles.

Construct the HTML with a container for the main content and a button to trigger the alert.
Define custom CSS to style the button and center the container using flexbox for better visual presentation.
Import the SweetAlert2 library’s CSS and JavaScript files from a CDN to enable the creation of centered alert boxes with enhanced styling and functionality.
Implement JavaScript to trigger the SweetAlert2 alert when the button is clicked. Customize the alert title, text, icon, and confirm button text as needed for the specific use case.
Attach an event listener to the button to invoke the function that opens the centered alert box when clicked, providing a user-friendly interaction experience.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
    <title>SweetAlert2 Alert Button</title>
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script src=
"https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        .container {
            text-align: center;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 450px;
        }

        .container h1 {
            margin: 0 0 20px;
            font-size: 24px;
            color: #333;
        }

        .sweet-alert-btn {
            background-color: #5f5fff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        .sweet-alert-btn:hover {
            background-color: #1f1fff;
        }

        .swal2-custom-btn {
            background-color: #5f5fff !important;
            color: white !important;
            border: none !important;
            padding: 10px 20px !important;
            border-radius: 5px !important;
            cursor: pointer !important;
            font-size: 16px !important;
            transition: background-color 0.3s ease !important;
        }

        .swal2-custom-btn:hover {
            background-color: #1f1fff !important;
        }
    </style>
</head>
<body>
    <div id="alertContainer" class="container">
        <h1>Click the button to show the alert</h1>
        <button id="sweetAlertButton" 
                class="sweet-alert-btn">Show SweetAlert</button>
    </div>

    <script>
        document.getElementById('sweetAlertButton')
                  .addEventListener('click', function() {
            document.getElementById('alertContainer')
                      .style.display = 'none';
            Swal.fire({
                title: 'SweetAlert2 Alert',
                text: 'This is a SweetAlert2 alert button!',
                icon: 'success',
                confirmButtonText: 'Cool',
                customClass: {
                    confirmButton: 'swal2-custom-btn'
                }
            }).then(() => {
                document.getElementById('alertContainer')
                           .style.display = 'block';
            });
        });
    </script>
</body>
</html>