Make a toast with HTML, CSS, and JS

Toasts are very useful for showing users some information. It has a wide variety of uses from displaying success messages for successful actions, showing error messages in case something goes wrong, and much more. Today we are going to build a simple toast with HTML and CSS. We are going to be using some javascript to add some interactivity.

We are going to be making a toast that shows up when a button is clicked. It can also be closed, which is hidden away, by clicking a close button.

CodePen - https://codepen.io/anishde12020/pen/JjrYMrW

To make a toast animate in or out, we need to make the toast first. For this example, I am going to add a simple icon and some text in a box and that is going to be our toast.

So, in the markup, let us start by adding a div for out toast -

Now, we need to add an icon. I am going to grab a simple information icon from HeroIcons and put in the SVG -

Let us also add a text -

This is what our page should look like -

The icon is so big that is doesn't even fit in the view. Let us fix this design with some CSS and then style it.

First, we are going to style the icon by defining a width and a height -

Let us now make our toast a flexbox and add some margin on the icon. I am also going to position the toast on the top-right using an absolute position.

Everything looks good except for the styling. Let us add some colors and other styles -

We have changed the background color of the toast, added a border to it, added some border radius, and changed the colors of the icon and the text so that they are visible on the black background.

This is how our toast should now look like -

Let us also add a button that will trigger the animation, that is, show the toast -

Let us also style this button as it looks quite ugly now

Let us also disable any overflow -

This is how everything should look like now -

Now that we have the toast and a button to trigger the animations, it is time to add the animations.

First of all, we are going to give the toast a starting point by putting it outside the view. So let us edit the CSS for the toast -

Now let us make a new class called toast-active that will get added to the toast whenever the button is clicked -

Notice that we are also changing the opacity during the transition. This just makes it look a little better.

Now let us write some javascript to add this class to the toast whenever the button is clicked -

Here, whenever the button is clicked, the toast-active class is being added to the toast. Right now the animation is instant, which doesn't look good. Let us add a transition -

Here the transition goes on for a quarter of a second and we have also eased it out so it isn't harsh.

We would like to give the user a close button that they can click to close the toast.

First of all, we need to add a button the the toast in our markup -

Let us also style it so that it is visible -

Now, when this button will be clicked, it will just do the reverse of what the show toast button did, that is, remove the toast-active class -

Now, clicking the cross symbol (close button) in the toast should take it away from the screen with a transition.

If everything has worked out well so far, give yourself a pat on the back because you have just built a toast with nothing but HTML, CSS, and JS!!!

If you had any issues, feel free to comment down below or reach out to me via Twitter.

Codepen for this project - codepen.io/anishde12020/pen/JjrYMrW

HeroIcons - heroicons.com

My Twitter - twitter.com/AnishDe12020