How TO - Callout Message

Learn how to create callout messages with CSS.

Callout

A callout message is often positioned at the bottom of a page to notify the user about something special: tips/tricks, discounts, action needed, other.

Try it Yourself »

Create a Callout

Step 1) Add HTML:

Example

<div class="callout">
<div class="callout-header">Callout Header</div>
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<div class="callout-container">
<p>Some text...</p>
</div>
</div>

If you want the ability to close the callout message, add a <span> element with an onclick attribute that says "when you click on me, hide my parent element" - which is the container <div> (class="alert").

Tip: Use the HTML entity "×" to create the letter "x".

Step 2) Add CSS:

Style the callout box and the close button:

Example

/* Callout box - fixed position at the bottom of the page */
.callout {
position: fixed;
bottom: 35px;
right: 20px;
margin-left: 20px;
max-width: 300px;
}

/* Callout header */
.callout-header {
padding: 25px 15px;
background: #555;
font-size: 30px;
color: white;
}

/* Callout container/body */
.callout-container {
padding: 15px;
background-color: #ccc;
color: black
}

/* Close button */
.closebtn {
position: absolute;
top: 5px;
right: 15px;
color: white;
font-size: 30px;
cursor: pointer;
}

/* Change color on mouse-over */
.closebtn:hover {
color: lightgrey;
}

Try it Yourself »

Tip: Also check out Alert Messages.

Tip: Also check out Notes.

❮ Previous Next ❯