What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

How to add notification message at the bottom of the screen that lasts for 3s?

fa2020

New member
Hi,
I want to add a notification message at the bottom of the screen when a button is clicked. My HTML/CSS code is as follow:

CSS:
<style>
            #main-image{
                display: block;
                margin-left: auto;
                margin-right: auto;
                max-width: 100%;
                max-height: auto;
            }
            h1{
                color: white;
                text-align:right;
            }
            label{
                color: black;
                text-align: right;
            }
            .container{
                float:none;
                text-align: right;
                padding: 5%;
            }
            input[type=text]{
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #b3b3b3;
            border-radius: 4px;
            box-sizing: border-box;
            text-align: right;
            }
            input[type=text]:focus{
                outline: none;
                border:1px solid #ff15b1;
                box-shadow: 0 0 10px #719ECE;
            }
            .border{
                background-color: whitesmoke;
                width: 300px;
                height: 400px;
                border-radius: 20px;
                float: right;
            }
            .btn01{
                background-color: #4CAF50;
                border:none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 4px 2px;
                cursor: pointer;
                border-radius: 30px;
            }
            .notification{
                padding: 20px;
                background-color: #24da00;
                color: white;
                position: relative;
                float: right;
            }
            .closebtn {
            margin-left: 15px;
            color: white;
            font-weight: bold;
            float: right;
            font-size: 22px;
            line-height: 20px;
            cursor: pointer;
            transition: 0.3s;
            }
            .closebtn:hover {
            color: black;
            }
        </style>

HTML:
<body bgcolor="black">
        <img id="main-image" src="Images/IT.jpg" width="1600" alt="Intro">
        <div class="heading">
            <h1>اطلاعات خرابی و علت خرابی</h1>
        </div>
        <div class="border">
            <div class="container">
                <label>کد تجهیز:</label>
                <br>
                <input type="text" maxlength="8">
                <br>
                <label>نام تجهیز:</label>
                <br>
                <input type="text">
                <br>
                <label>عنوان خرابی:</label>
                <br>
                <input type="text">
                <br>
                <label>عنوان علت خرابی:</label>
                <br>
                <input type="text">
                <br>
                <button class="btn01">ذخیره</button>
            </div>
        </div>
        <div class="notification">
            <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
            <strong>ثبت موفق</strong>
        </div>
    </body>
Please help me.
 
Back
Top