Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create alert messages with CSS?
Alert messages are important UI components used to notify users about critical information, confirmations, or warnings. Common examples include "Your order is confirmed", "Your password is about to expire", or "This action cannot be undone". Let's see how to create attractive alert messages using HTML and CSS.
Syntax
.alert {
padding: value;
background-color: color;
color: text-color;
border: border-value;
border-radius: radius-value;
}
Basic Alert Structure
First, create a container div for the alert message with a close button ?
<!DOCTYPE html>
<html>
<head>
<style>
.alertMessage {
padding: 20px;
background-color: #f44336;
color: white;
font-size: 18px;
margin: 10px 0;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="alertMessage">
<strong>Warning!</strong> This action cannot be reversed.
</div>
</body>
</html>
A red alert box with white text displaying "Warning! This action cannot be reversed." appears on the page with rounded corners and proper padding.
Alert with Close Button
Add a functional close button that allows users to dismiss the alert ?
<!DOCTYPE html>
<html>
<head>
<style>
.alertMessage {
padding: 20px;
background-color: #f44336;
color: white;
font-size: 18px;
margin: 10px 0;
border-radius: 5px;
position: relative;
}
.close {
position: absolute;
top: 15px;
right: 20px;
color: white;
font-weight: bold;
font-size: 24px;
cursor: pointer;
transition: color 0.3s ease;
}
.close:hover {
color: #ffcccc;
}
</style>
</head>
<body>
<div class="alertMessage">
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
<strong>Error!</strong> Please check your input and try again.
</div>
</body>
</html>
A red alert box with an "×" close button in the top-right corner appears. Clicking the close button removes the alert from the page. The close button changes color on hover.
Different Alert Types
Create various alert styles for different message types ?
<!DOCTYPE html>
<html>
<head>
<style>
.alert {
padding: 15px 20px;
margin: 10px 0;
border-radius: 5px;
font-size: 16px;
position: relative;
}
.alert-success {
background-color: #4CAF50;
color: white;
border-left: 5px solid #2e7d32;
}
.alert-warning {
background-color: #ff9800;
color: white;
border-left: 5px solid #f57c00;
}
.alert-error {
background-color: #f44336;
color: white;
border-left: 5px solid #d32f2f;
}
.alert-info {
background-color: #2196F3;
color: white;
border-left: 5px solid #1976d2;
}
</style>
</head>
<body>
<div class="alert alert-success">
<strong>Success!</strong> Your changes have been saved.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> Your session will expire in 5 minutes.
</div>
<div class="alert alert-error">
<strong>Error!</strong> Unable to process your request.
</div>
<div class="alert alert-info">
<strong>Info:</strong> New features are now available.
</div>
</body>
</html>
Four different colored alert boxes appear: green for success, orange for warning, red for error, and blue for info. Each has a colored left border and appropriate messaging.
Conclusion
CSS alert messages enhance user experience by providing clear visual feedback. Use different colors and styles to indicate message types, and include close buttons for better interactivity. Position and styling properties ensure alerts are both functional and visually appealing.
1K+ Views
