This snippet is for creating a professional notification bar for almost any kind of website to display information or notifications on the top of the main content. It is created in pure HTML plus CSS only and can be easily customized.
CTA notification bar using CSS
<div class="cta-bar">
<a class="cta-link" href="#">Want to know how I made $10K passive income from ebooks <span class="cta-tag">Click Here</span></a>
</div>
.cta-bar {
text-align: center;
position: fixed;
left: 0;
top: 0;
width:100%;
}
.cta-link {
background: rgb(4, 104, 241);
color: #fff;
display: block;
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1.8em;
padding: 9px 15px;
text-decoration: none;
transition: all .3s ease;
}
.cta-link:hover {
background: rgb(10, 91, 204);
color: #fff;
text-decoration: none;
}
.cta-link:active,
.cta-link:active,
.cta-link:visited {
color: #fff;
}
.cta-tag {
background: #ffe109;
border-radius: 3px;
color: #000;
margin-left: 10px;
padding: 4px 6px;
}
.cta-link:hover .cta-tag {
background: #09ffdd;
color: #353b44;
}