Error, Success, Warning, and Info Messages with CSS
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 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.
Example 1: Message Boxes With Icons, Using The icon HTML Element
To use message notification boxes, use this CSS:
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); .isa_info, .isa_success, .isa_warning, .isa_error { margin: 10px 0px; padding:12px; } .isa_info { color: #00529B; background-color: #BDE5F8; } .isa_success { color: #4F8A10; background-color: #DFF2BF; } .isa_warning { color: #9F6000; background-color: #FEEFB3; } .isa_error { color: #D8000C; background-color: #FFD2D2; } .isa_info i, .isa_success i, .isa_warning i, .isa_error i { margin:10px 22px; font-size:2em; vertical-align:middle; }
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.
The HTML To Generate The Message Boxes:
Four samples follow. In each sample, replace line 3 with your own message.
The blue info-message box:
<div class="isa_info"> <i class="fa fa-info-circle"></i> Replace this text with your own text. </div>
The green success-message box:
<div class="isa_success"> <i class="fa fa-check"></i> Replace this text with your own text. </div>
The yellow warning-message box:
<div class="isa_warning"> <i class="fa fa-warning"></i> Replace this text with your own text. </div>
The red error-message box:
<div class="isa_error"> <i class="fa fa-times-circle"></i> Replace this text with your own text. </div>
Example 2: Message Boxes With Icons, Use CSS to Generate Icons
You can generate the icons using the CSS :before
pseudo element. This way, you don’t have to use the i
icon HTML element as shown in Example 1. To do it this way, use this CSS instead:
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); .my-notify-info, .my-notify-success, .my-notify-warning, .my-notify-error { padding:10px; margin:10px 0; } .my-notify-info:before, .my-notify-success:before, .my-notify-warning:before, .my-notify-error:before { font-family:FontAwesome; font-style:normal; font-weight:400; speak:none; display:inline-block; text-decoration:inherit; width:1em; margin-right:.2em; text-align:center; font-variant:normal; text-transform:none; line-height:1em; margin-left:.2em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale } .my-notify-info:before { content:"\f05a"; } .my-notify-success:before { content:'\f00c'; } .my-notify-warning:before { content:'\f071'; } .my-notify-error:before { content:'\f057'; } .my-notify-info { color: #00529B; background-color: #BDE5F8; } .my-notify-success { color: #4F8A10; background-color: #DFF2BF; } .my-notify-warning { color: #9F6000; background-color: #FEEFB3; } .my-notify-error { color: #D8000C; background-color: #FFD2D2; }
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
.
The following sample HTML will show all four message boxes.:
<div class="my-notify-info">This is info text</div> <div class="my-notify-success">This is success text</div> <div class="my-notify-warning">This is warning text</div> <div class="my-notify-error">This is error text</div>
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.
The CSS:
.isa_info, .isa_success, .isa_warning, .isa_error { margin: 10px 0px; padding:12px; } .isa_info { color: #00529B; background-color: #BDE5F8; } .isa_success { color: #4F8A10; background-color: #DFF2BF; } .isa_warning { color: #9F6000; background-color: #FEEFB3; } .isa_error { color: #D8000C; background-color: #FFD2D2; }
The HTML for just the message boxes without icons:
<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:
box-shadow:1px 1px 3px #888;
See more: CSS colors, Font Awesome
Ali
May 9th, 2012 at 7:02 am
Well done. i like it thanks
Craig
May 14th, 2012 at 12:00 am
Could you please give an example of the HTML you used to create the sample pictures? Thanks in advance.
Isabel
May 16th, 2012 at 11:46 pm
Sure. I added examples at the end of the article (see above). Thanks for stopping by.
codingforever99
January 18th, 2013 at 3:47 am
nice work, I think adding some jguery effects will be great.
Isabel
January 19th, 2013 at 6:44 pm
Thanks.
Davide
July 22nd, 2013 at 6:41 pm
Nice, I like it. Thanks Isabel!
I added a simple code to fade it out with jQuery:
La tua lista prodotti รจ stata aggiornata con successo!
$(document).ready(function(){
$(‘#updated’).fadeOut(3000);
});
Nick
April 26th, 2013 at 4:15 am
You’ve done a really lovely job with these, Isabel. Thanks for sharing them ๐
Isabel
April 29th, 2013 at 5:11 pm
Thank you.
Luis
July 9th, 2013 at 8:10 am
Thanks!! nice tips! ๐
Daniele
September 7th, 2013 at 10:40 am
Hi Isa,
Great info, just a note regarding the images!
The icons have different sizes, two of them are 32×32 and two are 128×128.
Thanks!
Isabel
September 7th, 2013 at 11:57 am
Thank you. I just fixed it. They should all be 32×32, now. Good eye!
Mario
September 12th, 2013 at 3:51 pm
Ty very much for this ๐
HeartDisk
May 9th, 2014 at 3:11 am
Nice Work
Keep it Up
Omar Padilla
March 12th, 2015 at 10:47 am
Perfect. I’m going to use this. I for one like that you’re not using jquery. I try to avoid jquery at all costs and I wouldn’t want to import a big bulky library just for error/info messages.
Thanks
AB
May 17th, 2015 at 2:40 pm
Excellent work Isabel .Amazing..Keep up the good work !!!
Lucio
June 14th, 2015 at 6:09 pm
Nice job.
Thank you.
damith
May 30th, 2016 at 6:49 am
Thanks for this code
Kijana Woodard
July 22nd, 2016 at 10:31 am
Thanks for the code and thanks for *not* making an npm package out of this. ๐
Jamal
April 9th, 2017 at 9:39 am
hey, I just want to know how can i put the box on top of the form in the middle of page :O
Mic Slay
May 30th, 2017 at 11:46 am
You just saved me a lot of times with this and made it very easy to implement a small feature in an already existing codebase! Gracias!
Mic Slay
May 30th, 2017 at 11:47 am
“…saved me a lot of time…”*
Daniel
May 17th, 2018 at 9:13 am
Very complete and helpful. Thank you!
Abdellah
July 9th, 2018 at 11:42 am
Thanx
Irfan
September 7th, 2018 at 1:03 am
thanks
very nice and simple.