Error, Success, Warning & Info Messages

Posted on

Error, success, warning and info messages/alerts made entirely with CSS. These messages should be output to the user to let them know how things are going with their interaction with the site. Also please note that these use Font Awesome.

See the Pen Error, Success, Warning and Info Messages by Alex Dobson (@SufferMyJoy) on CodePen.

HTML

CSS

If you are already using Font Awesome, then you can delete the first line of this CSS that imports it.

As always thank you for reading and please share it around as much as you can! Please feel free to put any suggestions or ideas for future tutorials in the comments section below.

Related Posts

Simple jQuery Tabs

I can't exactly say why, but I've been really into doing little CSS code snippets like this tabs example lately. The tabs are a single content area with multiple panels, each associated with a header in a list. …

Pure CSS Buttons 2

More buttons made purely with CSS in a few different colors. Really I just made them for myself (again) so I can use them again later. Easy to copy paste and then use them however you want. Feel …

Pure CSS Buttons

Buttons made purely with CSS in a few different colors. Really made them for myself so I can use them again later. Easy to copy paste and then use them however you want. Feel free to copy paste …