Log in Sign Up

Create a CSS Alert

Let's face it, the 90s are long gone. Unfortunately, pop-up alerts still linger. For a cleaner look that still draws attention to important content, why not try CSS alerts instead? All you need is an alert image (you can download the one below) and something to tell the world.

The HTML:

<div class="alert">
   <p>Hello World! (or, you know, maybe something a bit more pertinent to your site...)</p>
</div>

And the CSS:

.alert {
   background: #fff6bf url(images/exclamation.png) 15px center no-repeat;
   text-align: left;
   padding: 10px 20px 10px 50px;
   border-top: 2px solid #ffd324;
   border-bottom: 2px solid #ffd324;
}

Downloads

Try MagicEdit today!

Sign Up for free Demo
Scroll to Top