Demo for Notification Alert Massages in Multiple Colors

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
}
.alert.success {
  background-color: #04AA6D;
}
.alert.info {
  background-color: #2196F3;
}
.alert.warning {
  background-color: #ff9800;
}
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}
.container {
  width: 90%;
  max-width: 100%;
  padding: 15px;
  margin: 0 auto;
}
.closebtn:hover {
  color: black;
}
</style>

</head>
<body>
<div class="container">
  <h2>Alert Messages</h2>
  <p>Click on the "x" symbol to close the alert message.</p>
  <div class="alert">
    <span class="closebtn">&times;</span>  
    <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
  </div>
  <div class="alert success">
    <span class="closebtn">&times;</span>  
    <strong>Success!</strong> Indicates a successful or positive action.
  </div>
  <div class="alert info">
    <span class="closebtn">&times;</span>  
    <strong>Info!</strong> Indicates a neutral informative change or action.
  </div>
  <div class="alert warning">
    <span class="closebtn">&times;</span>  
    <strong>Warning!</strong> Indicates a warning that might need attention.
  </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
var close = document.getElementsByClassName("closebtn");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function(){
    var div = this.parentElement;
    div.style.opacity = "0";
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}
</script>

</body>
</html>

Other Codes

Notification UI Design

This code is pure CSS and there are 4 types of alert notifications with different topics, along with separating line animation and light animation on . . .

Notification Icon with Hover Animation

It is a notification icon in the form of a ringtone that has animation in Hover mode and shakes. This code is pure CSS.

Automatically Display Alert Notifications

In this notification code, alerts are displayed by clicking a button and disappear after the display is completed. Their theme is blue and they also have . . .

Page Notification Alert Counter with Bell . . .

We have an alert notification in this code that starts counting by clicking on a button and the alarm sounds once with each count.