Deesign a close button using Pure CSS

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right






                        filter_none








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.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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= 


"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"> 


    </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> 



















                        chevron_right







                        filter_none








Output:




full-stack-img





    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
PranchalKatiyar
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.