Sticky Notification bars are very useful when you want to highlight something important on your website. You can use these bars for product launch notifications, ebook downloads, email subscriptions, etc. This notification bar is created using pure CSS only.
Sticky notification bar using CSS
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200;300;400&family=Lato:wght@300;400;800&display=swap" rel="stylesheet">
<div class="stickybar">
<div class="stickybar-inner">
<span class="stickybar-text">Join Now & Download your free ebook!</span>
<a href="#" class="stickybar-btn">Sign me Up!</a>
</div>
</div>
body {
background:#f0f0f0;
font-family: 'Lato', sans-serif;
margin: 0;
padding: 0;
padding-bottom:1500px;
}
.stickybar {
background: linear-gradient(to right, #ff146b, #ff2300);
display: flex;
align-items: center;
justify-content: center;
position:fixed;
top:0;
left:0;
width:100%;
}
.stickybar-inner {
padding:10px 15px;
}
.stickybar-text {
color: #fff;
font-size: 18px;
padding-right: 15px;
}
.stickybar-btn {
background: #fff;
border-radius: 4px;
box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, .1);
color: #ff2212;
display: inline-block;
font-weight: 600;
padding: 9px 15px;
text-decoration: none;
transition: all .2s ease-in-out;
}
.stickybar-btn:hover {
box-shadow: 9px 5px 4px 1px rgba(0, 0, 0, .1);
transform: translateY(-1px);
}
.stickybar-btn:hover,
.stickybar-btn:active,
.stickybar-btn:visited {
background: #fff;
color: #ff2212;
text-decoration: none;
}
@media (max-width: 767px) {
.stickybar {
display: block;
text-align: center;
}
.stickybar-text {
display: block;
padding-right: 0;
}
.stickybar-btn {
margin-top: 5px;
}
}