CSS Book Effect with 3D Animation
January 8, 2025
Donation Widget with Progress Bar
Donation Widget with Progress Bar
January 20, 2025

January 13, 2025

CSS Alert Message Boxes

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:

  1. Container: A div that wraps the alert message.
  2. Icon (Optional): A visual element to indicate the type of alert (success, error, warning or info).
  3. Text: The message itself.
  4. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *

Level Up Your Coding Skills

Get the best CSS, HTML, and JS snippets delivered to your inbox monthly. 🚀
No spam—just coding gold! 💻✨"

We don’t spam! Read our privacy policy for more info.

cookie
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more