CSS-only Toast


Here's a way to create a create a toast UI that toggles visible with CSS only.

This has come in handy for me in a form submission scenario. After submission, I want to show a "thank you" message.

First, style the toast however you prefer. Then, importantly, hide it:

.toast {
  /* ... */
  display: none;
}

Also include the selector for :target, which will select on an element with that id, when that id matches the hash in the URL:

.toast:target {
  display: block;
}

Then set up the markup, including the class and the id:

<div class="toast" id="toastme">This is the toast message</div>

Now, if you went to the url /#toastme, the toast would display. If the url is otherwise, it will be hidden.

Again, in the "thank you" scenario, this might come after a form submission, like this:

<form action="#toastme">
  <button>Submit</button>
</form>