Open In App
Related Articles

Design a close button using Pure CSS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The task is to make the close button using Pure CSS. There are two approaches that are discussed below.
 

Approach 1: Create a <div> inside another <div> which has alphabet ‘X’ in it which helps in displaying the close button. When the “click” event occurs on ‘X’, then perform the operation. In this example the outer <div> has been hidden when the event occurs.
 

Example: This example implements the above approach.


 

html

<!DOCTYPE HTML>
<html>
 
<head>
    <style>
        .outer {
            background: green;
            height: 60px;
            display: block;
        }
 
        .button {
            margin-left: 93%;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
 
<body style="text-align:center;">
     
    <h1>GeeksForGeeks</h1>
     
    <p>
        Click on the cross to
        hide the element.
    </p>
     
    <div class="outer">
        <div class="button">X</div>
    </div>
    <br>
     
    <p id="GFG"></p>
 
    <script>
        var down = document.getElementById("GFG");
        var el = document.querySelector('.button');
         
        el.addEventListener('click', function () {
            var el2 = document.querySelector('.outer');
            el2.style.display = "none";
        });
    </script>
</body>
 
</html>

                    

Output: 
 


 

Approach 2: jQuery is used in this approach. Create a <div> inside another <div> that contains the alphabet ‘X’ to display the close button. When the “Click” event occurs on ‘X’ then perform the operation. In this example, the outer <div> has been hidden when the event occurs.


 

Example: This example implements the above approach.


 

html

<!DOCTYPE HTML>
<html>
 
<head>
    <style>
        .outer {
            background: green;
            height: 60px;
            display: block;
        }
 
        .button {
            margin-left: 93%;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
    <script src=
    </script>
</head>
 
<body style="text-align:center;">
    <h1>
        GeeksForGeeks
    </h1>
    <p>
        Click on the cross to
        hide the element.
    </p>
    <div class="outer">
        <div class="button">X</div>
    </div>
    <br>
    <p id="GFG">
    </p>
 
    <script>
        var down = document.getElementById("GFG");
        $('.button').on('click', function () {
            $('.outer').hide();
        });
    </script>
</body>
 
</html>

                    

Output: 
 


 



Last Updated : 19 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads