How to use Custom CSS In 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:

How to Style Alert Buttons using CSS?

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

Tags:

#CSS #Web Technologies

Using SweetAlert2 Library

How to use Custom CSS In CSS

How to Style Alert Buttons using CSS?

Similar Reads

Contact Us