Toast Notification

A slide-in notification using :target to trigger and a CSS animation to auto-dismiss.

Published July 19, 2026

Demo

✓ Changes saved successfully! ✕

✕ Something went wrong. Try again. ✕

ℹ Your session expires in 5 minutes. ✕

HTML
				
				<a href="#toast-1">Show Toast</a>

<div id="toast-1" class="toast">
  <span>Message saved!</span>
  <a href="#" class="toast-close">✕</a>
</div>

			

CSS
				
				.toast {
  display: none;
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
}

.toast:target {
  display: flex;
  animation:
    toast-in .3s ease forwards,
    toast-out .3s ease 3s forwards;
}

@keyframes toast-in  { from { transform: translateX(120%); } }
@keyframes toast-out { to   { transform: translateX(120%); opacity: 0; } }

			

How it works

Trigger links use href="#toast-success" to set the URL hash. The matching <div id="toast-success"> element receives the :target pseudo-class and switches from display: none to display: flex. A CSS animation slides it in from the right (translateX(120%) → translateX(0)), and a second delayed animation (animation-delay: 3s) fades it out. Clicking the close <a href="#"> removes the hash target, hiding the toast immediately.