Web & Software Developer

Error, Success, Warning, and Info Messages with CSS

Update: you can show message boxes with only CSS instead of using the i icon HTML element. Both ways are explained here. (Skip down to the pure CSS solution.)

These message notification boxes use font icons instead of image icons in order to increase page speed. You can also use message boxes without icons. The style of these message boxes is square, but there are style variations below. If you prefer rounded borders, see the variations, below.

This page shows you how to use message notification boxes that look like this:

This is an info message.

This is a success message.

Consider this a warning.

This is an error message.

This page has 3 examples for notification message boxes. Example 1 shows you how to display message boxes with icons, in which you’ll have to use the i icon element in your HTML. Example 2 uses pure CSS to display the icons. Example 3 is for message boxes without icons (simple, color-coded message boxes, no icons). For fastest page speed, use Example 3.

Please note that the CSS imports the Font Awesome stylesheet. If you already have Font Awesome included somewhere in your site, you can delete line 1 above.

Now, generate an info message box by using the CSS class my-notify-info. Generate a success message box by using the CSS class my-notify-success. Generate a warning message box by using the CSS class my-notify-warning. Generate an error message box by using the CSS class my-notify-error.

You don’t have to use a div element. You can add the CSS class to any element, for example, a span element.

Example 3: Pure CSS Message Boxes With No Icons

If you prefer the message boxes without icons, use the following CSS and HTML instead. The benefit to using these message boxes without icons is that you will not load the Font Awesome stylesheet, and thus have the fastest page speed.

<div class="isa_info">Replace this text with your own INFO text.</div>
<div class="isa_success">Replace this text with your own SUCCESS text.</div>
<div class="isa_warning">Replace this text with your own WARNING text.</div>
<div class="isa_error">Replace this text with your own ERROR text.</div>

Style Variations

You can use the following CSS style variations for all 3 examples above. The following CSS code lines should be inserted into the CSS code, above, for the example that you are using. If you’re using Example 1 or Example 2, above, insert this into line 6 of the CSS code above. If you’re using Example 3, above, insert this into line 4 of the CSS code.

CSS Style Variation: Rounded Corners

If you want your message boxes to have rounded borders, insert this:

border-radius:.5em;

CSS Style Variation: Borders

If you want your message boxes to have line borders, whether or not they are rounded, insert this:

border: 1px solid;

CSS Style Variation: Box Shadows

If you want your message boxes to have a bit of shadow around the box to show depth, insert this: