How to create mini button and icon position in the page ?

Last Updated : 25 Jul, 2024

In this article, we will see how to create a mini button and icon position on the page in jQuery. Here, we will create a simple working button that will perform a specific task when we click the button. For instance, when clicking the button, a popup message will show on the display screen & with another click, the button will close those popup messages. In the first approach, we have a button and the GFG icon that will change their view along with changing their color and rotation by clicking the button. In the second approach, we have created a simple button that will display the hidden popup message on clicking the button, also added different icons to these popup messages & on hovering those icons, the icons will pop up accordingly.

We will explore all these approaches for creating the mini button and icon position on the page.

Approach 1:

In this approach, we will create an HTML file that contains the simple code for the icon and button. Here, we are using the transition property in the button & apply the @keyframe to animate the button when we can click the button & also the icon color will change. In order to use the icons, we need to add the required cdn link. Make sure that the images are placed in the same folder where the remaining files have been created. In JavaScript, we are using the click() function to operate the rotation and change for icon color when we click the button, along with using the toggleclass() method to operate these all operations in our icon and button code. Now, use the CSS properties to make any position for icons and buttons.

Example 1: This example describes the creation of a mini button and icon position on the page.

index.html

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>
        Create mini button and icon position in the page
    </title>
    <script src=
"https://code.jquery.com/jquery-3.6.3.min.js">
    </script>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <script src="main.js"></script>
    <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        body {
          font-family: Verdana, Geneva, Tahoma, sans-serif;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background-color: #f5f5f5;
        
        }
        
        a {
          color: #00000030;
          font-size: 3em;
        }
        
        .heart i.fa-g {
          color: green;
        }
        
        .heart i.fa-f {
          color: green;
        }
        
        .heart {
          animation: heart 0.5s linear;
        }
        
        @keyframes heart {
          0% {
            transform: rotate(0deg) scale(1.7);
          }
        
          40% {
            transform: rotate(0deg) scale(1);
          }
        
          41% {
            transform: rotate(360deg) scale(1);
        
          }
        
          100% {
            transform: rotate(0deg) scale(1);
          }
        }
        
        .btn {
          padding: 5px 20px;
          margin-left: -108px;
          position: absolute;
          margin-top: 90px;
          font-weight: bold;
          border-radius: 5px;
        
        }
        
        .btn:hover {
          background-color: black;
          transition: .3s linear;
          color: aliceblue;
          border-radius: white;
        }
    </style>
</head>

<body>
    <a href="#" class="like">
        <i class="fa-solid fa-g"></i>
        <i class="fa-duotone fa-f"></i>
        <i class="fa-solid fa-g"></i>
        <button class="btn">submit</button>
    </a>
</body>

</html>

JavaScript

//main.js

$(document).ready(function () {
    $(".like").click(function () {
        $(this).toggleClass("heart");
    });
});

Output:

Approach 2:

In this approach, we will create simple html file that will display the welcome message by clicking the button, along with containing few icons. Here, we are creating basically a GeeksforGeeks card & displaying the simple account successfully created message. For icons, we are adding cdn icon link and after that we are creating <i> tag in card and provide the name of icon like home, settings, pencil, etc. When we click button, it will hide from display screen. In index.js file, the id & class are used for close and another one for open popup message, i.e., by creating the onclick() function that will click the button, so it will display popup message and on another click, it will hide the popup message. Set the position of icon and button by using the CSS properties for styling. We made two functions, i.e., one Open Popup and another one Closepopup & create the functionality for open and close popup message in jQuery in both functions and using the id popup in which we combined both operations in just one click.

Example 2: This is another example that describes the creation of mini button and icon position in the page.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>
        Create mini button and icon position in the page
    </title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="index.js"></script>
    <style>
        .container{
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .btn{
            padding: 10px 60px;
            background: gray;
            border: 1px solid black;
            color: black;
            outline: none;
            cursor: pointer;
            font-size: 22px;
            font-weight: 500;
            border-radius: 30px;
        }
        .popup{
            width: 400px;
            border: 1px solid black;
            background: rgb(174, 168, 168);
            border-radius: 6px;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.1);
            text-align: center;
            transition: transform 0.4s, top 0.4s ;
        }
        .open-popup{
            visibility: visible;
            top: 50%;
            transform: translate(-50%, -50%) scale(1);
        }
        .close-popup{
            visibility: hidden;
        
        }
        .popup h2{
            font-size: 38px;
            font-weight: bold;
            color: rgb(26, 45, 25);
            margin: 30px 0 10px; 
        }
        .popup button{
            width: 100%;
            margin-top: 50px;
            padding: 10px 0;
            background: #6fd649;
            color: black;
            font-weight: bold;
            border: 1px solid black;
            font-size: 18px;
            border-radius: 4px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) ;
        }
         .fa {
            cursor: pointer;
        }
        .fa:hover {
            color: black;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div class="container">
        <button type="submit" 
                class="btn" 
                onclick="openPopup()">
             Click Here
        </button>
        <div class="popup" 
             id="popup">
            <h2>
                Welcome To GeeksForGeeks
            </h2>
            <p>
                Your account is successfully created on 
                GeeksForGeeks. Thanks!
            </p>
            <i class="fa fa-home fa-fw"></i>
                Home
            <i class="fa fa-book fa-fw"></i>
                Library
            <i class="fa fa-pencil fa-fw"></i>
                Pencil
            <i class="fa fa-cog fa-fw"></i>
                Settings
            <button type="button" 
                    onclick="closePopup()">
                OK
            </button>
        </div>
    </div>
</body>

</html>

JavaScript

//index.js

let popup = document.getElementById("popup";
function openPopup() {
    popup.classList.add("open-popup");
}
function closePopup() {
    popup.classList.add("close-popup");
}