
CSS Book Effect with 3D Animation
January 8, 2025
Donation Widget with Progress Bar
January 20, 2025
Alert message boxes are essential elements of any user interface providing visual feedback to the user about their actions, system messages or important info. With a bit of CSS you can create alert boxes that not only convey info but also enhance the overall experience. In this article we’ll look at a simple CSS snippet for creating alert boxes and how to customize them.
Alert Box Structure
An alert box has the following parts:
- Container: A div that wraps the alert message.
- Icon (Optional): A visual element to indicate the type of alert (success, error, warning or info).
- Text: The message itself.
- Close Button (Optional): A button to dismiss the alert.
HTML for an Alert Box:
<!-- Success -->
<div class="sf-alert success">
<i class="alert-icon fas fa-check-circle"></i>
<div class="alert-content">
<p>This is a success message! <a href="#">Link</a></p>
</div>
<a class="alert-close" href="#"><i class="fas fa-times"></i></a>
</div>
<!-- Error -->
<div class="sf-alert error">
<i class="alert-icon fas fa-times-circle"></i>
<div class="alert-content">
<p>This is an error message!</p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Vitae velit, sunt nemo, non</li>
</ul>
</div>
<a class="alert-close" href="#"><i class="fas fa-times"></i></a>
</div>
<!-- Warning -->
<div class="sf-alert warning">
<i class="alert-icon fas fa-exclamation-triangle"></i>
<div class="alert-content">
<p>This is a warning message! <a href="#">Link</a></p>
</div>
<a class="alert-close" href="#"><i class="fas fa-times"></i></a>
</div>
<!-- Info -->
<div class="sf-alert info">
<i class="alert-icon fas fa-info-circle"></i>
<div class="alert-content">
<p>This is an info message! <a href="#">Link</a></p>
</div>
<a class="alert-close" href="#"><i class="fas fa-times"></i></a>
</div>
CSS Snippet for Alert Boxes
/* ------------------ */
/* Snippflow Alerts */
/* ------------------ */
.sf-alert {
--sf-alert-success-bg: #d4edda;
--sf-alert-success-text: #155724;
--sf-alert-success-icon: #28a745;
--sf-alert-success-link: #155724;
--sf-alert-error-bg: #f8d7da;
--sf-alert-error-text: #721c24;
--sf-alert-error-icon: #dc3545;
--sf-alert-error-link: #721c24;
--sf-alert-warning-bg: #fff3cd;
--sf-alert-warning-text: #856404;
--sf-alert-warning-icon: #ffc107;
--sf-alert-warning-link: #856404;
--sf-alert-info-bg: #d1ecf1;
--sf-alert-info-text: #0c5460;
--sf-alert-info-icon: #17a2b8;
--sf-alert-info-link: #0c5460;
}
.sf-alert { display: flex; align-items: center; gap: 20px; margin: 15px 0; padding:15px 20px; border-radius: 4px; }
.sf-alert .alert-icon { flex-shrink:0; font-size: 24px; }
.sf-alert .alert-content { flex-grow: 1; }
.sf-alert .alert-content > * ~ * { margin-top: 10px; }
.sf-alert .alert-content ul { margin-left: 20px; }
.sf-alert .alert-content a { text-decoration: underline; }
.sf-alert .alert-content a:hover { text-decoration: none; }
.sf-alert a.alert-close{ display: flex; align-items: center; justify-content: center; flex-shrink:0; width: 30px; height: 30px; border-radius: 4px; font-size: 18px; text-decoration: none; }
.sf-alert a.alert-close:hover { background-color: rgba(0, 0, 0, 0.03); }
.success { color: var(--sf-alert-success-text); background-color: var(--sf-alert-success-bg); }
.success a { color: var(--sf-alert-success-link); }
.success .alert-icon { color: var(--sf-alert-success-icon); }
.error { color: var(--sf-alert-error-text); background-color: var(--sf-alert-error-bg); }
.error a { color: var(--sf-alert-error-link); }
.error .alert-icon { color: var(--sf-alert-error-icon); }
.warning { color: var(--sf-alert-warning-text); background-color: var(--sf-alert-warning-bg); }
.warning a { color: var(--sf-alert-warning-link); }
.warning .alert-icon { color: var(--sf-alert-warning-icon); }
.info { color: var(--sf-alert-info-text); background-color: var(--sf-alert-info-bg); }
.info a { color: var(--sf-alert-info-link); }
.info .alert-icon { color: var(--sf-alert-info-icon); }
Result
See the Pen CSS Alert Message Boxes by Snippflow (@snippflow) on CodePen.
Summary
CSS alert message boxes are easy and effective. With a bit of JavaScript you can create interactive, user friendly alert boxes that improve your web app’s usability. Use and customize the snippet above for your project!