How to Create Toast Notifications With
HTML & CSS
Toast notices or toast messages are little boxes that spring up on the screen, show some message and vanish all alone or a button click. Toast notices are extremely normal. These can be utilized to educate the client about the consummation regarding an errand, a mistake that happened during the undertaking or to provide the client with an input of some kind.
Toast notices as a rule vanish in 4-5 seconds all alone. At times where the notices are furnished with a nearby button, the client can decide to make them disappear by tapping on the nearby button.
where a toast notification can be used:
At the point when you are downloading a few documents behind the scenes, you get a toast message saying, "The records are downloaded effectively".
While communicating something specific you get blunder input, "Message not send because of specialized issues".
At the point when a help you are utilizing is going to lapse, you receive an admonition message, "2 days left for your membership to terminate.
Video Tutorial of Toast Notifications
Toast Notifications [Source Codes]
To Create Toast Notifications with HTML and CSS, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Toast UI Design</title>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="wrapper">
- <div class="toast success">
- <div class="container-1">
- <i class="fas fa-check-circle"></i>
- </div>
- <div class="container-2">
- <p>Success</p>
- <p>Your changes has been saved successfully.</p>
- </div>
- <button>×</button>
- </div>
- <div class="toast error">
- <div class="container-1">
- <i class="fas fa-times-circle"></i>
- </div>
- <div class="container-2">
- <p>Error</p>
- <p>Error has occured while saving changes.</p>
- </div>
- <button>×</button>
- </div>
- <div class="toast info">
- <div class="container-1">
- <i class="fas fa-info-circle"></i>
- </div>
- <div class="container-2">
- <p>Info</p>
- <p>There has a new version available on it</p>
- </div>
- <button>×</button>
- </div>
- <div class="toast warning">
- <div class="container-1">
- <i class="fas fa-exclamation-circle"></i>
- </div>
- <div class="container-2">
- <p>Warning</p>
- <p>Something went worng , Try again.</p>
- </div>
- <button>×</button>
- </div>
- </div>
- </body>
- </html>
Now paste the following codes into your style.css file
- *{
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- font-family: "Open Sans",sans-serif;
- }
- body{
- background-color: #FFFFFF;
- }
- .wrapper{
- width: 400px;
- position: absolute;
- transform: translate(-50%,-50%);
- top: 50%;
- left: 50%;
- }
- .toast{
- width: 100%;
- height: 78px;
- padding: 18px;
- background-color: #ffffff;
- border-radius: 7px;
- display: grid;
- grid-template-columns: 1.3fr 6fr 0.5fr;
- box-shadow: 0 15px 30px rgba(0,0,0,0.5);
- }
- .success{
- border-left: 4px solid #47d764;
- }
- .success i{
- color: #47d764;
- }
- .container-1 i{
- font-size: 35px;
- }
- .error{
- border-left: 4px solid #ff355b;
- }
- .error i{
- color: #ff355b;
- }
- .info{
- border-left: 4px solid #2f86eb;
- }
- .info i{
- color: #2f86eb;
- }
- .warning{
- border-left: 4px solid #ffc021;
- }
- .warning i{
- color: #ffc021;
- }
- .container-1,.container-2{
- align-self: center;
- }
- .container-2 p:first-child{
- font-size: 22px;
- color: #101020;
- font-weight: 600;
- }
- .container-2 p:last-child{
- font-size: 14px;
- font-weight: 400;
- color: #656565;
- }
- .toast button{
- align-self: flex-start;
- background-color: transparent;
- border: none;
- font-size: 25px;
- line-height: 0;
- cursor: pointer;
- color: #656565;
- }
- .toast:not(:last-child){
- margin-bottom: 50px;
- }
-
If you face any difficulties while creating your Toast Notifications or your code is not working as expected, you can download the source code files by clicking on the download button.