Open In App
Related Articles

Design a close button using Pure CSS

Improve Article
Improve
Save Article
Save
Like Article
Like

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: 
 

 


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 19 Jan, 2022
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials