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>
//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>
//index.js
let popup = document.getElementById("popup";
function openPopup() {
popup.classList.add("open-popup");
}
function closePopup() {
popup.classList.add("close-popup");
}
Output:
Similar Reads
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
Getting Started with jQuery jQuery is a fast lightweight, and feature-rich JavaScript library that simplifies many common tasks in web development. It was created by John Resign and first released in 2006. It makes it easier to manipulate HTML documents, handle events, create animations, and interact with DOM(Document Object M
4 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery Syntax The jQuery syntax is essential for leveraging its full potential in your web projects. It is used to select elements in HTML and perform actions on those elements.jQuery Syntax$(selector).action()Where - $ - It the the shorthand for jQuery function.(selector) - It defines the HTML element that you w
2 min read
jQuery CDN A Content Delivery Network (CDN) is a system of distributed servers that deliver web content to users based on their geographic location. Including the jQuery CDN in your project can improve the performance, enhance reliability, and simplify maintenance.What is a jQuery CDN?A jQuery CDN is a service
4 min read
jQuery Selectors
JQuery SelectorsWhat is a jQuery Selector?jQuery selectors are functions that allow you to target and select HTML elements in the DOM based on element names, IDs, classes, attributes, and more, facilitating manipulation and interaction. Syntax: $(" ")Note: jQuery selector starts with the dollar sign $, and you encl
5 min read
jQuery * SelectorThe jQuery * selector selects all the elements in the document, including HTML, body, and head. If the * selector is used together with another element then it selects all child elements within the element used. Syntax: $("*")Parameters: *: This parameter is used to select all elements.Example 1: Se
1 min read
jQuery #id SelectorjQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating on the terms, it simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aja
1 min read
jQuery .class SelectorThe jQuery .class selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements. Syntax: $(".class") Parameter: class: This parameter is required to specify the class of the elements to be selected.Example 1: In this example,
1 min read
jQuery Events
jQuery Effects
jQuery HTML/CSS
jQuery Traversing