Hi guys, Today I am going to share some useful css code to improve your alert/confirmation boxes in your website by adding this simple jquery and css code.

Notification Box  using CSS
Notification Box using CSS


  1. Notification Box with Custom Icon
  2. Alert Box
  3. Success Blox
  4. Information Box

View Demo Download Now

I have already designed cool notification boxes using jquery & css in my previous article – http://w3lessons.info/2012/01/07/cool-notification-alert-message-boxes-using-css/



CSS Code

div.alert-message {
display: block;
padding: 13px 12px 12px;
font-weight: bold;
font-size: 14px;
color: white;
background-color: #2ba6cb;
border: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
position: relative;
div.alert-message .box-icon {
display: block;
float: left;
background-image: url('icon.png');
width: 30px;
height: 25px;
margin-top: -2px;
background-position: -8px -8px;
div.alert-message p {
margin: 0px;
div.alert-message.success {
background-color: #5da423;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
div.alert-message.success .box-icon {
background-position: -48px -8px;
div.alert-message.warning {
background-color: #e3b000;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
div.alert-message.warning .box-icon {
background-position: -88px -8px;
div.alert-message.error {
background-color: #c60f13;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
div.alert-message.error .box-icon {
background-position: -128px -8px;
div.alert-message a.close {
color: #333;
position: absolute;
right: 4px;
top: -1px;
font-size: 17px;
opacity: 0.2;
padding: 4px;
div.alert-message a.close:hover, div.alert-box a.close:focus {
opacity: 0.4;

Jquery Code for Close Button

 $(".alert-message").delegate("a.close", "click", function(event) {

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!


View Demo Download Now

Related Posts