Learn how to make a toast notification using HTML and CSS effortlessly. Follow our step-by-step guide for creating custom popups.
Table of Contents
In the world of web development, providing users with timely and unobtrusive notifications is essential for enhancing user experience. One popular form of notification is the toast notification. Toast notifications are small, temporary messages that appear on the screen, delivering important information without interrupting the user's flow.
In this guide, we'll delve into how to create toast notifications using HTML and CSS. These foundational web development languages allow us to craft simple yet effective notification popups that can be seamlessly integrated into any website or web application. Whether you're a beginner or an experienced developer looking to enhance your UI/UX design, this step-by-step tutorial will equip you with the skills to implement custom toast notifications efficiently. Let's get started!
Source Code
Step 1 (HTML Code):
To create a toast notification using HTML, begin by defining a container element to hold the notification message.
Let's break down the HTML code:
1. <!DOCTYPE html>: This declares the document type and version of the HTML being used, which is HTML5 in this case.
2. <html lang="en">: This tag defines the root element of the HTML document and specifies that the language of the document is English.
3. <head>: This section contains metadata about the HTML document, such as character encoding, viewport settings, and the title of the page.
- <meta charset="UTF-8">: This specifies the character encoding for the document, ensuring proper interpretation of text characters.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag sets the X-UA-Compatible header to "IE=edge", which ensures that the latest version of Internet Explorer's rendering engine is used to display the webpage.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag defines the viewport settings for responsive design. It sets the width of the viewport to the width of the device and sets the initial zoom level to 1.0.
- <title>Pure CSS Toast Notifications</title>: This sets the title of the webpage displayed in the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: This links an external CSS stylesheet named "styles.css" to the HTML document for styling purposes.
4. <body>: This is the main content of the HTML document.
- <div class="container">: This is a container element that wraps all the content within the body.
- <div class="toast-buttons">: This div contains radio buttons for different types of toast notifications: Success, Info, Pending, and Error.
- <input type="radio" name="btn-group" id="btn-success" checked>: These input elements are radio buttons for selecting the type of toast notification. Each input has a unique ID and is associated with a label.
- <label for="btn-success">Success</label>: These labels are associated with the radio buttons and provide a textual description for each option.
- <div class="toast-container">: This div contains the actual toast notification elements.
- <div class="toast" id="success">: These divs represent individual toast notifications. They have unique IDs and are styled differently based on their type (success, info, pending, or error).
- <div class="toast-icon">: This div contains an icon representing the type of notification (e.g., a checkmark for success, a warning symbol for error).
- <div class="toast-msg">: This div contains the message content of the toast notification.
- <p>: This paragraph element contains the main text of the notification.
- <span>: This span element typically represents a link or clickable element within the notification.
Step 2 (CSS Code):
Once the basic HTML structure of the toast notification is in place, the next step is to add styling to the toast notification using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our notification. Let's break down the CSS code section by section:
1. Importing Google Fonts:
- The @import rule is used to import the Google Font "Poppins" with various weights and styles. This font will be used throughout the page.
2. Global Reset:
- The * selector selects all elements on the page and resets their margin, padding, and box-sizing to ensure consistent layout.
3. Custom Properties:
- The :root pseudo-class defines custom properties (CSS variables) that can be used throughout the stylesheet. These are defined for colors used in the design.
4. Body Styles:
- Sets up basic styles for the entire body of the page, including a minimum height of 100% of the viewport height, centering content, and setting the background color to a variable called "--bkg" (defined earlier).
5. Container Styles:
- Defines styles for a container element that will hold the toast notifications. It sets a fixed width and height and positions it relatively.
6. Toast Notifications Styles:
- Defines styles for the toast notifications and their container.
- Toasts are absolutely positioned within the container.
- Each toast consists of an icon and a message, displayed in a grid layout.
- Toasts have various background colors defined by custom properties.
- Icons are SVG graphics with white stroke color.
- Toasts start with zero opacity and are translated off-screen. They transition into view with a cubic-bezier animation.
- Toasts are differentiated by their position in the container and their custom IDs.
7. Toast Button Styles:
- Defines styles for buttons associated with the toast notifications.
- Buttons are absolutely positioned at the bottom of the container.
- Buttons are styled as labels with specific colors and font weights when checked.
- The appearance of the buttons changes based on whether they are checked.
This will give our toast notification an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--green: #3eb56e;
--dark-green: #319f5d;
--blue: #67a4bf;
--dark-blue: #5291ae;
--grey: #c3d1d9;
--dark-grey: #9eb0ba;
--red: #c64444;
--dark-red: #a90d0e;
--bkg: #2f3442;
--white: #ebebeb;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background-color: var(--bkg);
font-family: "Poppins", sans-serif;
}
.container {
width: 400px;
height: 200px;
position: relative;
}
/* Toast Notifications
------------------------------------------*/
.toast-container {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 350px;
height: 100px;
overflow: hidden;
}
.toast {
position: absolute;
width: 350px;
display: grid;
grid-template-columns: 6vmin 1fr;
align-items: center;
border-radius: 5px;
overflow: hidden;
--padding: 0.8em;
box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px,
rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
opacity: 0;
transform: translateY(120px);
transition: transform 1500ms cubic-bezier(0.16, 0, 0, 1.42);
}
.toast:nth-child(1) .toast-msg {
background-color: var(--green);
}
.toast:nth-child(1) .toast-icon {
background-color: var(--dark-green);
}
.toast:nth-child(2) .toast-msg {
background-color: var(--blue);
}
.toast:nth-child(2) .toast-icon {
background-color: var(--dark-blue);
}
.toast:nth-child(3) .toast-msg {
background-color: var(--grey);
color: var(--bkg);
}
.toast:nth-child(3) .toast-icon {
background-color: var(--dark-grey);
}
.toast:nth-child(4) .toast-msg {
background-color: var(--red);
}
.toast:nth-child(4) .toast-icon {
background-color: var(--dark-red);
}
.toast svg {
width: 24px;
height: 24px;
fill: none;
stroke: var(--white);
stroke-width: 2;
}
.toast-icon {
height: 100%;
display: grid;
place-items: center;
padding: var(--padding);
}
.toast-msg {
color: var(--white);
font-size: 0.9rem;
padding: var(--padding);
}
.toast-msg span {
display: block;
font-size: 0.7rem;
opacity: 0.7;
}
/* Toast Buttons
------------------------------------------*/
.toast-buttons {
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
width: 350px;
display: flex;
}
.toast-buttons input {
appearance: none;
}
.toast-buttons label {
color: var(--white);
text-align: center;
flex: 1 100%;
font-size: 0.85rem;
padding: 0.3em;
cursor: pointer;
}
.toast-buttons:has(:checked) + .toast-container .toast {
opacity: 0;
transform: translateY(120px);
transition: transform 1500ms cubic-bezier(0.16, 0, 0, 1.42);
}
.toast-buttons:has(#btn-success:checked)
+ .toast-container
.toast[id="success"] {
opacity: 1;
transform: translateY(20px);
}
#btn-success:checked + label {
color: var(--green);
font-weight: bolder;
}
.toast-buttons:has(#btn-info:checked) + .toast-container .toast[id="info"] {
opacity: 1;
transform: translateY(20px);
}
#btn-info:checked + label {
color: var(--blue);
font-weight: bolder;
}
.toast-buttons:has(#btn-pending:checked)
+ .toast-container
.toast[id="pending"] {
opacity: 1;
transform: translateY(20px);
}
#btn-pending:checked + label {
color: var(--dark-grey);
font-weight: bolder;
}
.toast-buttons:has(#btn-error:checked) + .toast-container .toast[id="error"] {
opacity: 1;
transform: translateY(20px);
}
#btn-error:checked + label {
color: var(--red);
font-weight: bolder;
} Final Output:
Conclusion:
In conclusion, mastering the creation of toast notifications using HTML and CSS opens up a world of possibilities for enhancing user interaction and experience on your website or web application. By following the steps outlined in this guide, you've learned how to structure HTML elements and style them with CSS to create custom toast notifications tailored to your design preferences and user needs.
Toast notifications offer a subtle yet effective way to deliver important information to users without disrupting their workflow. Whether you're notifying users of successful actions, providing updates, or alerting them to errors, implementing toast notifications adds value to your web projects and contributes to a seamless user experience.
Experiment with different designs, animations, and functionalities to further personalize and optimize your toast notifications. Continuously seek feedback from users to refine and improve the effectiveness of your notifications over time. Start implementing toast notifications today and enhance the way you communicate with your audience.
Code by: Sicontis
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
