Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create callout messages with CSS?

CSS Web Development Front End Technology

A callout message is a notification component that appears on a webpage, typically used to display offers, announcements, or important information to users. These messages usually include a close button allowing users to dismiss them when not interested.

Syntax

.callout {
    position: fixed;
    bottom: value;
    right: value;
}

Example: Basic Callout Message

Here's how to create a complete callout message with HTML and CSS −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 20px;
    }
    
    .callout {
        position: fixed;
        bottom: 35px;
        right: 20px;
        margin-left: 20px;
        max-width: 300px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        overflow: hidden;
    }
    
    .calloutHeading {
        padding: 25px 15px;
        background: rgb(68, 93, 235);
        font-size: 20px;
        color: white;
        margin: 0;
    }
    
    .calloutMessage {
        padding: 15px;
        background-color: #f5f5f5;
        color: black;
    }
    
    .calloutMessage p {
        margin: 0;
        line-height: 1.4;
    }
    
    .calloutMessage a {
        color: rgb(68, 93, 235);
        text-decoration: none;
        font-weight: bold;
    }
    
    .close {
        position: absolute;
        top: 5px;
        right: 15px;
        color: white;
        font-size: 30px;
        cursor: pointer;
        font-weight: bold;
    }
    
    .close:hover {
        color: lightgrey;
    }
</style>
</head>
<body>
    <h1>Callout Message Example</h1>
    <p>This is some page content. The callout will appear in the bottom-right corner.</p>
    <p>You can interact with the page normally while the callout is visible.</p>
    
    <div class="callout">
        <div class="calloutHeading">Special Offer!</div>
        <span class="close" onclick="this.parentElement.style.display='none';">×</span>
        <div class="calloutMessage">
            <p>Get 50% off on all products. Don't miss out! <a href="#">Shop Now</a></p>
        </div>
    </div>
</body>
</html>

A blue callout message appears in the bottom-right corner with "Special Offer!" heading, promotional text, and a clickable close (×) button. The message has rounded corners and a subtle shadow.

Key Properties

Property Purpose Common Values
position: fixed Keeps callout in viewport bottom, top, right, left
z-index Ensures callout appears above content 999, 1000
max-width Limits callout width on large screens 300px, 400px

Close Functionality

The close button uses inline JavaScript to hide the callout when clicked −

<span class="close" onclick="this.parentElement.style.display='none';">×</span>

The close button is positioned absolutely within the callout container for precise placement in the top-right corner.

Conclusion

CSS callout messages provide an effective way to display notifications and promotions. Use position: fixed for persistent visibility and include a close button for better user experience.

Updated on: 2026-03-15T14:52:50+05:30

960 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements