Pure CSS Notification Bars

In today’s tutorial we’re going to take a look at the creation of some pure css notification bars. If you browse the internet on daily bases, which I know you do, I’m sure you’ve saw these notification bars on many websites.

The notification bars are usually on the top of the web page, sometimes they slide down as you scroll down along the page, and they usually are used to notify you of something important, such as a giveaway, or a post, or maybe an email news letter optin and so on.

Most of these bars usually use jQuery to show/hide and to make them sticky, but they can be done using CSS only. Let’s take a look at how we can do this.

The HTML

The first thing we need to do is create the bar it self. It’s pretty straight forwards. We’ll use a checkbox that is place exactly before the bar’s container, and two labels, one inside the container and one above the checkbox.

<!-- Label to Show Notification bar -->
<label for="toggleTop" id="showTop">+</label>
<!-- The checkbox -->
<input type="checkbox" id="toggleTop" name="toggleTop" value="toggleTop" checked="checked">
<!-- The Notification bar container -->
<div id="topbar">
    <!-- You're content here -->
    <!-- Label to Hide Notification bar -->
    <label for="toggleTop" id="hideTop">X</label>
</div>

And that’s it for the HTML. As you can see both labels are for the checkbox with the id of #toggletop. This is because we’ll use the css selector :checked to show and hide our bar.

The CSS

As for the CSS, first we’ll give some basic styling to our css notification bar like so:

/* Styling the bar itself */
#topbar {
    position:fixed;
    top: -60px; /* has to be around the height of the bar or more. */
    display: block;
    z-index: 99999;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    background-color: #c0392b;
    color: #fff;
    font-size: 25px;
    text-align: center;
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
    transition: top 1s;
}

Note that it has top: -60px this is around the height of the bar with one line of text. We use this to slide the bar off the screen when the checkbox is unchecked meaning it’s hidden.

After this, we style and position the hide/show buttons:

/* Hiding the checkbox */
#toggleTop {
    display: none;
}
/* Styling the lables, to show and hide the bar */
#showTop {
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 30px;
    display: block;
    padding: 10px;
    background-color: #000000;
    color: #fff;
}
#hideTop {
    float: right;
    display: inline-block;
}

And the last thing we need to do, is make it so when the checkbox is checked, ( which is by default, with the checked=”checked” html property on the checkbox, ) is to show the notification bar. meaning we’ll make it so it sticks to the top of the browser with top: 0px

/* Displaying the bar when the checkbox is checked */
#toggleTop:checked + #topbar {
    transition: top 1s;
    top:0px;
}

And after this, you should have something similar to this:

Placing the Bar on the bottom of the screen

To move the bar to the bottom of the screen, you can use the following CSS. It’s pretty much all the same, but instead of having top:-60px to hide and top:0px to show, we have bottom:-60px and bottom:0px;

/* Styling the bar itself */
#topbar {
    position:fixed;
    bottom: -60px;
    display: block;
    z-index: 99999;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    background-color: #8e44ad;
    color: #fff;
    font-size: 25px;
    text-align: center;
    -webkit-box-shadow: 0 -8px 6px -6px black;
       -moz-box-shadow: 0 -8px 6px -6px black;
            box-shadow: 0 -8px 6px -6px black;
    transition: bottom 1s;
}
/* Hiding the checkbox */
#toggleTop {
    display: none;
}
/* Styling the lables, to show and hide the bar */
#showTop {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    right: 30px;
    display: block;
    padding: 10px;
    background-color: #000000;
    color: #fff;
}
#hideTop {
    float: right;
    display: inline-block;
}
/* Displaying the bar when the checkbox is checked */
#toggleTop:checked + #topbar {
    transition: bottom 1s;
    bottom:0px;
}

And then, you should have something like this:

And there you have it! You’re own pure css notification bars, ready to notify your users about contest, new anything! I hope this tutorial helped you create your nice notification buttons. If you have any suggestion/ideas or question, please leave a comment down below! Also, don’t forget to share it with your friends and followers!