Skip to main content
All CollectionsCSS hacks
Add an alert message to your page
Add an alert message to your page
Aleks avatar
Written by Aleks
Updated over 5 years ago

Would you like to create an Alert message like this one below?

 

It’s easier than you think! Just follow the steps below:

1. Firstly, drag an HTML widget to the page.

2. Copy&paste the following Code into HTML editor:

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  This is an alert box.
</div>

3. Then, add the following CSS code into HTML widget -> Additional CSS. 

/* The alert message box */
.alert {
  padding: 20px;
  background-color: #f44336; /* Red */
  color: white;
  margin-bottom: 15px;
}
/* The close button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}
/* When moving the mouse over the close button */
.closebtn:hover {
  color: black;
}

All set...👌

Cheers. 😊

Be sure to let us know in case of questions!

Did this answer your question?