Design a Cookies Message Popup Template using HTML and CSS

Last Updated : 29 Dec, 2023

In this article, we will design a Cookies Message Popup template using HTML and CSS. Cookies play a pivotal role in enhancing user experiences on websites by storing information about user preferences and interactions. The "Cookies Message Popup Template" is a simple and customizable solution for websites to inform users about using cookies.

Table of Content

Simple cookie consent
Cookie Message with Options

We will explore the above approaches for designing a Cookies Message Popup with the help of examples.

The HTML document defines a simple cookie consent popup with a clear message and an acknowledgment button.
CSS styles are applied to create an aesthetically pleasing and responsive design for the popup, featuring a fixed position at the bottom, a dark background, and contrasting text and button colors.
The popup is fixed at the bottom of the screen, covering the entire width. It includes padding, a subtle box shadow, and a noticeable message to grab the user's attention.
The "Got it!" button is styled with a distinctive color scheme and a hover effect to enhance user experience

Example 1: We will design a Simple Cookies Message Popup using HTML and CSS in this example.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Cookie Consent Popup</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
        }

        #cookie-popup {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 15px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        }

        #cookie-popup p {
            margin: 0;
        }

        #cookie-popup button {
            margin-top: 10px;
            background-color: #16bb24;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: large;
            cursor: pointer;
        }

        #cookie-popup button:hover {
            background-color: #357ae8;
        }
    </style>
</head>

<body>
    <div id="cookie-popup">
        <p>
            This website uses cookies to ensure you get
            the best experience on our website.
        </p>
        <button>
            Got it!
        </button>
    </div>
</body>

</html>

Output:

In HTML, the structure of a cookie message popup, featuring an icon, descriptive text, and buttons, are defined.
CSS styles are applied to ensure an appealing and responsive design for the cookie popup. This includes setting the position, size, background color, and button styles.
The popup is fixed at the bottom left of the screen using CSS, ensuring it remains visible without interfering with the main content.
Three buttons are designed for user interaction: "Accept All Cookies," "Necessary Cookies Only," and "Customize Settings." Each button has distinct styling and a hover effect to enhance the visual effect.

Example 2: In this example, we will design a more advanced and styled Cookies Message Popup.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Cookies Message Popup</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        #cookies-popup {
            position: fixed;
            bottom: 20px;
            left: 20px;
            width: 450px;
            background: #333;
            color: #fff;
            padding: 40px;
            text-align: center;
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
            z-index: 1000;
            border-radius: 8px;
        }

        .btn-cont {
            display: flex;
            margin: 20px 20px;
        }

        #cookies-popup p {
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .btn-cont button {
            background: #fff;
            color: #333;
            border: none;
            width: 50%;
            padding: 8px 20px;
            cursor: pointer;
            font-weight: bold;
            margin: 5px;
            border-radius: 4px;
        }

        .btn-cust {
            padding: 15px 30px;
            font-weight: bold;
            color: #333;
            border: none;
            cursor: pointer;
            font-size: 15px;
            font-weight: bold;
            border-radius: 4px;
        }

        button:hover {
            background-color: rgba(196, 218, 214, 0.76);
        }
    </style>
</head>

<body>
    <div id="cookies-popup">
        <i class='fas fa-cookie-bite'
           style='font-size:80px;'>
        </i>
        <p>
              This website uses cookies to ensure you get
            the best experience on our website.
        </p>
        <div class="btn-cont">
            <button>Accept All Cookies</button>
            <button>Necessary Cookies Only</button>
        </div>
        <button class="btn-cust">
            Customize Settings
        </button>
    </div>
</body>

</html>