Toast Dismiss
A fully-fledged toast notification with an X — clicking slides the toast off-canvas to the right while fading, the way a real production toast behaves.
Toast Dismiss the 15th of 18 designs in the 18 CSS Close Buttons collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="ccb-toast"> <span class="ccb-toast-dot"></span><span class="ccb-toast-msg">Saved successfully</span ><button class="ccb-toast-x" aria-label="Dismiss"><span></span><span></span></button> </div>
.ccb-toast {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 8px 10px 14px;
border-radius: 10px;
background: #1a1a28;
border: 1px solid rgba(46,204,138,0.25);
color: #f0eeff; font-size: 13px; font-weight: 500;
box-shadow: 0 6px 20px rgba(0,0,0,0.4);
transition: transform 0.45s cubic-bezier(0.55,0,0.45,1), opacity 0.45s;
}
.ccb-toast.is-out { transform: translateX(120%); opacity: 0; }
.ccb-toast-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #2ecc8a; box-shadow: 0 0 8px rgba(46,204,138,0.5);
}
.ccb-toast-msg { white-space: nowrap; }
.ccb-toast-x {
width: 22px; height: 22px;
border: none; border-radius: 6px;
background: transparent;
position: relative; cursor: pointer;
transition: background 0.2s;
}
.ccb-toast-x:hover { background: rgba(255,255,255,0.08); }
.ccb-toast-x span {
position: absolute; top: 50%; left: 50%;
width: 10px; height: 1.5px;
background: #6b6987; border-radius: 1px;
transition: background 0.2s;
}
.ccb-toast-x:hover span { background: #f0eeff; }
.ccb-toast-x span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-toast-x span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); } document.querySelectorAll('.ccb-toast').forEach(function(toast) {
var x = toast.querySelector('.ccb-toast-x');
if (!x) return;
x.addEventListener('click', function() {
toast.classList.add('is-out');
setTimeout(function() { toast.classList.remove('is-out'); }, 1400);
});
});