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.
We will explore the above approaches for designing a Cookies Message Popup with the help of examples.
Simple Cookie Consent
- 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:
Cookie Message with Options
- 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 =
< 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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...