Notification Button Using HTML, CSS, And jQuery

Hello guys, I hope you are doing well. In this post, I will teach you how to create a notification button using HTML, CSS, and jQuery. In the previous article, we have talked about Responsive Author Box Using HTML and CSS. So if you haven’t read this article then please go and read it.

Notification Button Using HTML, CSS, And jQuery

Notification Buttons are important as they provide important notifications.  In this article, I have created a notification button that stores some informative text inside a box. Basically, it hides the information and only shows when the user clicks on the button.

Notification Button Using HTML, CSS, And jQuery

Some of the features of this notification button are fa fa-icon, hover effect, Done close button, Stylish text, custom .notif color, etc. Also, you can change the text, border, color of the box, and text by using color properties.

Read: Responsive author box using HTML and CSS

If you don’t understand what I am saying then watch the video tutorial given below.

Video Tutorial On Notification Button Using HTML, CSS, And jQuery

You can get the source code below which is great for you. Also please make sure to subscribe to our channel.

Notification Button Using HTML, CSS, And jQuery[Source Code]

Before taking the source code let’s understand how this code is working. First I have created two files i.e., index,html, and style.css. Now in the head section, I link the CSS file and fa icons CSS file. Then in the body, I have used .notif class for the box and icon for the button. Then included the jQuery file and javascript for the function. In the CSS file, I style the elements that are present in the HTML document.

Now, you can copy the source code for this project below:

HTML

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="style.css">
        
    </head>
    <body>
        <div><a class='icon' href='javascript:;' title='Show Notification'><i aria-hidden='true' class='fa fa-bell'/></a></div>
        <div class='notif'>
            <div class='title'>Notification</div>
            <div class='text'>
            Type all your important notification here.�� </div>
            <a class='btn close' style="text-decoration: none;" href='javascript:;' title='Done'>Done</a>
            </div>
           
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
            <script rel="type/javascript">
$(document).ready(function(){$(".close").click(function(){$(".notif").removeClass("active")})}),$(document).ready(function(){$(".icon").click(function(){$(".notif").toggleClass("active")})});
            </script>
    </body>
</html>

CSS

.notif{
    visibility: hidden;
    opacity: 0
}

.notif {
    background: #4e6cef;
    position: fixed;
    padding: 25px;
    top: 20%;
    transform: scale(1.2);
    max-width: 450px;
    margin: auto;
    left: 0;
    right: 0;
    z-index: 100;
    border-radius: 15px;
    box-shadow: 0 10px 3rem -1rem rgba(0, 0, 0, 0.5);
    transition: all .5s
}

a.btn.close {
    background: #7e3ce7;
    color: #fff;
    margin-top: 15px;
    display: inline-block;
    padding: 6px 13px;
    border-radius: 3px;
    font-size: 13px
}

a.btn.close:hover {
    background: #7e3ce7;
    color: #fff
}



.title {
    margin-bottom: 15px;
    font-weight: 600;
    color: #fff;
}

.notif.active {
    visibility: visible;
    opacity: 1
}

.notif.active {
    transform: scale(1)
}

.text {
    font-size: 14px;
    color: #fff;
}

a.icon {
    background: #f39c12;
    color: #fff;
    font-size: 16px;
    padding: 0;
    position: absolute;
    right: 100px;
    top: 13px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border-radius: 99em;
    transition: all .3s
}

a.icon:hover {
    background: #e67e22;
    color: #fff
}

THANKS FOR VISITING, VISIT AGAIN

Shares
facebook sharing button Share
twitter sharing button Tweet
whatsapp sharing button Share
telegram sharing button Share
pinterest sharing button Pin

Leave a Comment