Button Animation – CodingNepal

Button Click Animation in HTML CSS & JavaScript

CodingNepal — Sat, 07 Jan 2023 21:11:21 +0000

Creating a button-click animation in HTML, CSS, and JavaScript can be a challenging but rewarding learning project. This project is a great opportunity to hone your skills in animations and make something that you can share with others.

A button-click animation is a type of animation that is activated when a button is clicked by a user. These animations can take various forms, such as changing the button’s color, and size, or creating a ripple effect. Button-click animations add a layer of interactivity and engagement to websites and web applications.

In this blog, you will learn to create a button-click animation using HTML, CSS, and JavaScript! By the end of this tutorial, you will have a button that animates when clicked, producing small bubbles as shown in the image. Recently I created a Chrome Extension I hope that project will also be helpful for you.

Video Tutorial of Button Click Animation

If you prefer to learn through video tutorials, this tutorial on creating a button-click animation is for you! We’ll take you step by step through the process of creating a button that animates when clicked Alternatively, you can continue reading this blog for a written guide on the same topic.

Steps to Create a Button Click Animation

We will create a Button Click Animation in HTML, CSS, and JavaScript in two simple steps:

File Structure of the Project

Creating Button Click Animation

1. File Structure of the Project

To build this button-click animation, we’ll be using two separate files – index.html and style.css. These files will contain the HTML, CSS, and JavaScript code respectively needed to bring the button click animation. Let’s get started by setting up these files and adding the basic code.

Once you have made these files, you can proceed to the next step of creating your Button Click Animation.

2. Creating Button Click Animation

In the second step, we will design the user interface for our button and style it using HTML and CSS. Once the user interface is complete, we will use JavaScript to create make animate on button click.

In the index.html file, add the following HTML and JavaScript code to create the basic structure of the animated button




  
    
    
    
   Button Click Animation

In the style.css file, add the following CSS code to add styles and make the button and its bubbles. If you want, you can change the color, background, font, and size of the button in this code.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0faff;
}

.button {
  position: relative;
  padding: 10px 22px;
  border-radius: 6px;
  border: none;
  color: #fff;
  cursor: pointer;
  background-color: #7d2ae8;
  transition: all 0.2s ease;
}
.button:active {
  transform: scale(0.96);
}
.button:before,
.button:after {
  position: absolute;
  content: "";
  width: 150%;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1000;
  background-repeat: no-repeat;
}
.button.animate::before {
  top: -70%;
  background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
  animation: greentopBubbles ease-in-out 0.6s forwards infinite;
}
@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}
.button.animate::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%),
    radial-gradient(circle, #7d2ae8 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  animation: greenbottomBubbles ease-in-out 0.6s forwards infinite;
}
@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70% 0%;
  }
  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105% 0%;
  }
  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

Conclusions and Final Words

By following the steps you have successfully created a button-click animation. There are lots of animations you can find on this website to enhance your skills in animation.

If you found this blog helpful, please consider sharing it with others. Your support helps us continue creating valuable content and resources for the development community. Thank you for your support!

Star Rating in HTML CSS & JavaScript

CodingNepal — Fri, 16 Dec 2022 21:11:21 +0000

If you are looking for the Star Rating System and want to create it in HTML CSS & JavaScript then this blog could meet your demand.

In this blog, you will learn how to create a star rating system using HTML, CSS, and JavaScript. The instructions included in the post can help you build a system that allows users to rate something by selecting a certain number of stars. Recently I have provided a blog on Creating Dark & Light Mode I hope that will also help to enhance your HTML and CSS skills.

Typically, a star rating system consists of a set of stars that are displayed on a website or application, and users can select a certain number of stars to represent their rating. It is widely used to allow users to provide feedback or to rate items such as products, movies, or restaurants.

Have a look at the given image of our star rating system. Basically, in this star rating system, you will get changing the color of the stars when the user clicks on them and store the user’s rating.

If you would like to watch the demo of this Star Rating System and want to create it step by step in HTML CSS & JavaScript, then you can watch the video tutorial which is given below.

Video Tutorial | Star Rating in HTML CSS & JavaScript

In the video tutorial, you saw that there were initially five light-colored stars displayed on the screen. When I clicked on one of the stars, it changed to a yellow color, and the stars that came before it also changed to yellow. This demonstrates how the star rating system can be made dynamic by using JavaScript to update the appearance of the stars in real time based on user input.

I hope that the information and examples provided in this discussion have helped you understand how to create a star rating system using HTML, CSS, and JavaScript. If you are having trouble building the system on your own, and don’t want to watch the video tutorial then use the source code provided below to help you.

Star Rating in HTML CSS & JavaScript [Source Code]

To create Star Rating in HTML CSS & JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Star Rating in HTML CSS & JavaScript by clicking on the given download button.

First, paste the following codes into your index.html file.




  
    
    
    
    Star Rating in HTML CSS & JavaScript
    
    
    
   
  
  
    
      How was your experience?

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(45deg, #ffd195, #ffb283);
}
.rating-box {
  position: relative;
  background: #fff;
  padding: 25px 50px 35px;
  border-radius: 25px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
.rating-box header {
  font-size: 22px;
  color: #dadada;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}
.rating-box .stars {
  display: flex;
  align-items: center;
  gap: 25px;
}
.stars i {
  color: #e6e6e6;
  font-size: 35px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.stars i.active {
  color: #ff9c1a;
}

Third, paste the following codes into your script.js file.

 // Select all elements with the "i" tag and store them in a NodeList called "stars"
const stars = document.querySelectorAll(".stars i");

// Loop through the "stars" NodeList
stars.forEach((star, index1) => {
  // Add an event listener that runs a function when the "click" event is triggered
  star.addEventListener("click", () => {
    // Loop through the "stars" NodeList Again
    stars.forEach((star, index2) => {
      // Add the "active" class to the clicked star and any stars with a lower index
      // and remove the "active" class from any stars with a higher index
      index1 >= index2 ? star.classList.add("active") : star.classList.remove("active");
    });
  });
});

If you face any difficulties while creating your Star Rating System or your code is not working as expected, you can download the source code files for this Star Rating System for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

Create Toggle Dark/Light Mode in HTML & CSS

CodingNepal — Tue, 13 Dec 2022 21:11:21 +0000

Previously, we usually had a light theme for our web and mobile platforms. But now, dark mode is gaining popularity. Many desktop and mobile app platforms are embracing the dark theme because it is more comfortable to look at and saves battery life on mobile devices.

This blog will teach you how to create Toggle Button in Dark/Light Mode HTML and CSS. In my recent blog post, I have provided Top 10 Website Templates Design, which could also enhance your skills in HTML CSS as well as JavaScript.

Although the light theme has some benefits, many people still need to learn to use dark-themed websites. Therefore, it would be advisable to provide users with the ability to switch between dark and light modes in web applications. This way, they can choose the theme that works best for them.

A toggle button is a user interface element that allows users to switch between two states, such as on and off. In the context of dark and light modes, a toggle button would be used to switch between the two color schemes. Toggle buttons can be found on many web pages and apps, such as the wifi toggle button on Windows.

In the provided image of the Dark/Light Toggle Button, the button is in the “off” or “closed” state because the blue circle is on the left side. Additionally, the background is blue, indicating that the current color scheme is the light mode. When the toggle button is clicked, the blue circle moves to the right side, and the color scheme changes to the dark mode, as indicated by the change in color of the background and the toggle button.

If you’re curious about how the Dark/Light Toggle Button works, take a look at the preview I have provided below. I have explained the HTML and CSS code I used to make this Toggle Button and its Dark/Light Mode.

Toggle Button Dark/Light Mode in HTML CSS | Video Tutorial

All of the HTML and CSS code that I used to create this Dark/Light Mode is provided. Instead of duplicating the code or downloading the source code file, I strongly advise you to watch the full video explanation of this Toggle Button Dark/Light Mode. By watching the video tutorial, you can create this Toggle Button.

As you saw in the video tutorial for this Toggle Button with Dark/Light Mode, the initial toggle button was white with a lime green background and the webpage was white. When I clicked the toggle button, the circle moved to the right and changed to dark, and the background of the body also changed to dark with a nice animation.

Now, hopefully, you can create this Toggle Button Dark/Light Mode using HTML and CSS. The source codes for all the HTML and CSS I used to develop this Input Label Animation are provided below.

Toggle Button Dark/Light Mode in HTML & CSS [Source Code]

To create Toggle Dark/Light Mode, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Toggle Button Dark/Light by clicking on the given download button.

First, paste the following codes into your index.html file.





  
  
  
   Toggle Button With Dark/Light Mode | CoderGirl

Second, paste the following codes into your style.css file

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
label{
  position: relative;
  width: 480px;
  height: 180px;
  display: block;
  background: #d9d9d9;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: inset 0px 5px 15px rgba(0,0,0,0.3), inset 0px -5px 15px rgba(255,255,255,0.3);
}
label:after{
  content: '';
  position: absolute;
  height: 160px;
  width: 160px;
  background: #f2f2f2;
  border-radius: 100px;
  top: 10px;
  left: 10px;
  transition: 0.5s;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
input:checked ~ label:after{
  left: 470px;
  transform: translateX(-100%);
  background: linear-gradient(180deg,#777,#3a3a3a);
}
input:checked ~ label{
  background: #242424;
}
.background{
  position: absolute;
  width: 100%;
  height: 100vh;
  background: #fff;
  z-index: -1;
  transition: 0.5s;
}
input:checked + label + .background{
  background: #242424;
}
input{
  display: none;
}

That’s all, now you’ve successfully created a project on Toggle Button Dark/Light Mode. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

Custom Range Slider in HTML CSS & JavaScript

CodingNepal — Sun, 30 Oct 2022 21:11:20 +0000

Hello buddy, I have come up with another exciting and valuable project today. In this project, you will learn to custom range sliders with changing volume icons and range numbers. There are lots of JavaScript Projects I already have created. This project will boost JavaScript skills to more extent.

Range Slider is the section that can be available on the webpage to increase and decrease the value. For example when we have to increase or volume of the computer we have to use a range slider. Range sliders can be any shape and size but the main moto of the range slider is the same.

Let’s take a look at the given preview of our project [Custom Range Slider] which I have given as an image. As you can see on the range slider, there is a range slider in the middle, on the left side of it there is a speaker icon and on the right side, there is a number. Basically, when we slide the range the speaker icon and that number also change according to the value of the range slider.

To see the real demo of this project [Custom Range Slider], all the HTML CSS, and JavaScript code that I have used to create this range slider. I have provided a full video tutorial below.

Custom Range Slider in HTML CSS & JavaScript | Video Tutorial

Don’t worry I have provided all the HTML CSS and JavaScript code that I have used to create this Range Slider. Before getting into the source code file, I would like to explain the given video tutorial of this project [Custom Range Slider] briefly.

As you have seen in the video tutorial of our project [Custom Range Slider]. At first, there was a range slider with the volume on the right side and the range value on the left side. When I slid the range the speaker icon and the number also changed according to the value.

Like when the range was zero then there was a mute volume icon when the value is between 1 to 30 the volume icon is normal when the range value is between 30 to 80, volume icon was little loud shape and when the range slider got a value between 80 to 100 then the volume icon got extremely loud sound. To create this range slider and its UI, I have used HTML and CSS. To change the numeric value and icon, I used some JavaScript code.

I hope now you are able to create this project [Custom Range Slider] by using HTML CSS and JavaScript. If you are feeling difficulty creating this range slider. I have provided all the source codes below.

Custom Range Slider [Source Codes]

To create a Custom Range Slider using HTML CSS and JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Border Loading Animation by clicking on the given download button.

First, paste the following codes into your index.html file




  
    
    
    
    Range Slider in HTML CSS & JavaScript
    
    
    
    
  
  
    
      
      
      0

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4070f4;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  margin: 0 15px;
  max-width: 600px;
  width: 100%;
  padding: 0 20px;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper #icon {
  font-size: 35px;
  color: #333;
  width: 70px;
  text-align: center;
}
.wrapper input {
  max-width: 400px;
  width: 100%;
  margin: 0 10px;
  appearance: none;
  height: 18px;
  border-radius: 25px;
  background-color: #ededed;
  box-shadow: 0 0 0 2px #ededed;
  overflow: hidden;
  cursor: pointer;
}
input::-webkit-slider-thumb {
  appearance: none;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-color: #4070f4;
  box-shadow: -208px 0 0 200px #4070f4;
}
.wrapper .slide-value {
  font-size: 27px;
  font-weight: 500;
  color: #333;
  width: 70px;
  text-align: center;
}

const icon = document.querySelector("#icon"),
       range = document.querySelector("input"),
       slideValue = document.querySelector(".slide-value");

     range.addEventListener("input", () => {
       let rangeVal = range.value;
       slideValue.innerText = rangeVal;

       if (rangeVal > 0) {
         icon.classList.replace("uil-volume-mute", "uil-volume-down");
       } else {
         icon.classList.replace("uil-volume-down", "uil-volume-mute");
       }
       if (rangeVal > 30) {
         icon.classList.replace("uil-volume-down", "uil-volume");
       } else {
         icon.classList.replace("uil-volume", "uil-volume-down");
       }
       if (rangeVal > 80) {
         icon.classList.replace("uil-volume", "uil-volume-up");
       } else {
         icon.classList.replace("uil-volume-up", "uil-volume");
       }
     });

Toggle Button Dark Light Mode in HTML CSS & JavaScript LocalStorage

CodingNepal — Fri, 16 Sep 2022 21:11:20 +0000

Hello buddy, I hope you are doing and creating mind-blowing projects using HTML, CSS, and JavaScript. Today on this blog, you are going to learn how to make a toggle button with dark and light modes using HTML, CSS, and JavaScript. I have also used local storage to keep the selected mode while we refresh the page or reopen the file. Earlier I have made a Simple Toggle Button, I hope you have liked it.

A toggle button is the type of button used to turn on or off. The dark and light modes are the color appearance of the page. We can see on many webpages and apps that they use this type of toggle button. For example, on Windows, we can see this button in the wifi section, where we use this toggle button to turn on or off the wifi.

Have a look at the given image of our project [Toggle Button Dark Light Mode]. As you can see in the image, there is a toggle button in close or off status because the blue circle is on the left side. Similarly, our background is also in blue, so this is our light mode. When we click on the toggle section, the blue circle moves to the right side and its color and background color change into dark mode, which will be called dark mode.

For the demo of this project and all the HTML, CSS, and JavaScript code that I have used to create this project [Toggle Button Dark Light Mode ], watch the given video tutorial. After watching the given video tutorial, you will get an idea of how all the HTML, CSS, and JavaScript codes are working behind this project.

Toggle Button Dark Light Mode in JavaScript | LocatStorage

I have provided all the HTML CSS & JavaScript code that I have used to create this project [Toggle Button with Dark Light Mode], but before getting into the source code, I would be delighted to berifly explain the given video tutorial.

As you have seen on the video tutorial [Toggle Button with Dark Light Mode]. At first, there was a toggle button with blue circle with white background on it, similarly the full wepage color was also blue. When I clicked on the toggle button the toggle’s circle moves to right side and it’s color also changed into dark, similarly the background of the body was also changed into dark with a beautiful animation.

I had refreshed the page and reopened that file in an another tab but the selected mode did not change to make this I used localstorage and the UI design of the toggle button is made by HTML and CS, to toggle that button I used some JavaScript code.

Now I believe that you can create this type of toggle button and also the dark and light mode by using HTML CSS and JavaScript. If you are feeling difficult to build this project [Toggle Button with Dark Light Mode], I have provided all the HTML CSS and JavaScript code below.

Toggle Button with Dark Light Mode [Source Code]

To get the following HTML and CSS code for Social Media Navigation Button. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.




  
    
    
    
   Toggle Button with Dark/Light Mode

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4070f4;
  transition: all 0.3s ease-in-out;
}
body.dark {
  background-color: #18191a;
}
.toggle {
  position: relative;
  height: 130px;
  width: 300px;
  border-radius: 100px;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.toggle::before {
  content: "";
  position: absolute;
  height: 110px;
  width: 110px;
  background: #4070f4;
  border-radius: 50%;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
}
.toggle.active::before {
  background-color: #18191a;
  left: calc(100% - 110px - 14px);
}ont-family: 'Poppins', sans-serif;
}

If you face any difficulties while creating your Toggle Button or your code is not working as expected, you can download the source code files for this Toggle Button for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

Social Media Navigation Button in HTML CSS & JavaScript

CodingNepal — Mon, 22 Aug 2022 21:11:20 +0000

Hello buddy, I believe that you are doing and creating incredible pieces of stuff. Today in this blog, you will learn to make Social Media Navigation Button in HTML CSS & JavaScript. I would like to tell you that I have created many projects about Media Icons and Hover animation. As with others, today’s project will be beneficial for all types of websites.

Social Media Navigation button is the Icon that acts like a button and helps the user to redirect particular webpage. For example, we can see on the website there is lots of social media icons like Facebook, Twitter, Instagram, and all and, when we click on the Facebook icons we are redirected to the Facebook website or application.

Have a quick look at the given image of our project [Social Media Navigation Button], On the image you can see a total of seven media icons, and at the bottom of those icons, there is a close button. Also, when we hover over that medial icon they indicate the name of the social media icon through the tooltip. Actually at first on the screen, those media icons will be hidden and there will be a icon. When clicking on that icon all the social media navigation button appears.

Let’s watch the give video tutorial of our project [Social Media Navigation Button], a demo of our project, and all the HTML CSS and JavaScript code that I have used to create this project.

Social Media Navigation Button in HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript codes that I have used to make this Social Media Navigation Button. Before getting into the source code file, I would like to explicate the given video tutorial shortly.

As you have seen in the video tutorial of our project [Social Media Navigation Button], there was a button with a plus icon, and all the social media nav buttons were hidden. When I clicked on the plus icon, all the social media navigation buttons appeared and the plus icon also changed into a cross. Similarly, when I again clicked on that cross icon all the media navigation buttons disappeared and the plus icon changed into a plus icon. When I hover over that icon those icons a tooltip appeared with the name of that icon.

To create the UI design and bring all font icons of that social media navigation menu button I have used HTML and CSS and to show and hide the median nav icon and change the plus and cross buttons I have used some javascript code.

Now I supposed that you can build this Social Media Navigation Button in HTML CSS and JavaScript. If you are feeling tough to create this, I have provided all the source code below.

Social Media Navigation Button [Source Code]

To get the following HTML CSS and Javascript code for Social Media Navigation Button. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background: #e3f2fd;
}
.container {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
.media-icons {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  padding: 6px;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transform: translateX(-100%);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.close-btn.open ~ .media-icons {
  transform: translateX(0);
}
.media-icons a {
  text-decoration: none;
  position: relative;
  height: 35px;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  margin: 6px;
}
.media-icons a i {
  color: #fff;
}
.media-icons a .tooltip {
  position: absolute;
  left: 55px;
  font-size: 14px;
  font-weight: 400;
  pointer-events: none;
  background-color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  transform: translateY(-25px);
  opacity: 0;
  transition: all 0.2s linear;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
a:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
}
a .tooltip::before {
  content: "";
  position: absolute;
  height: 10px;
  width: 10px;
  top: 50%;
  left: -5px;
  transform: translateY(-50%) rotate(45deg);
  background-color: #fff;
}
.close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  margin-top: 20px;
  background-color: #8e36ff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transform: rotate(45deg);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.close-btn.open {
  transform: rotate(90deg);
  background-color: #de0611;
}

If you face any difficulties while creating your Social Media Navigation Buttons or your code is not working as expected, you can download the source code files for this Social Media Nav Buttons for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

How to Create Toggle Button in HTML CSS & JavaScript

CodingNepal — Thu, 21 Jul 2022 21:11:20 +0000

Hello friend I hope you are doing fantastic. Today in this blog you will learn to Create a Toggle Button in HTML CSS and JavaScript. I recently created a love shape Toggle Button, which I believe you may like. Today’s toggle button will be simple and valuable.

The toggle button is the type of button that can be used on any page of application of other frontend parts to activate or deactivate its related kinds of stuff. for example, when you need to turn on wifi then we have to click on the toggle button right?. The toggle button can be used on any page of application of other frontend parts to activate or deactivate its related kinds of stuff.

Have a quick look at the given image of our toggle button that I have given on the webpage. As we can see on the image of our toggle button, at first you can see the first toggle button, which is in closed status and the second one is in opened condition. Actually, the toggle button will be only one, and to open or closed we need to click on it. The circle part will only slides.

I would highly recommend you to watch the given video tutorial on our toggle button. By watching the video tutorial you will get the real demo of the toggle button and all the HTML CSS and JavaScript code that I have used to create this toggle button.

Create Toggle Button in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Toggle Button, before getting into the source code file, I would like to explain the given video tutorial of our project toggle button briefly.

As you have seen in the video tutorial on the toggle button. At first, there was a toggle button in the closed status when I liked that button the circle part slides to the right side with beautiful animation, and again when I clicked on it, the circle part slides to the left side. For the UI design, I used HTML and CSS, for the animation I used CSS cubic bezier, and to make it slide I used some JavaScript code.

Now I believe, you can make this toggle button easily by using HTML CSS, and JavaScript, If you are feeling difficulty creating this toggle button, I have provided all the source code below;

Toggle Button [Source Code]

To get the following HTML CSS and JavaScript code for an Animated Button You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.



    
    
        
        
        
       Toggle Button Animation

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7d2ae8;
}
.toggle{
  position: relative;
  height: 12px;
  width: 125px;
  cursor: pointer;
  border-radius: 25px;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.toggle::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background-color: #7d2ae8;
  border: 10px solid #fff;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.toggle.active::before{
  left: calc(100% - 70px);
  background-color: #fff;
  border-color: #7d2ae8;
}

Button Animation in HTML CSS & JavaScript

CodingNepal — Sun, 10 Jul 2022 21:11:20 +0000

Hello buddy, I hope you are doing well. Today you are going to create a Button with an Animation in HTML CSS & JavaScript. Though there are lots of Buttons I have created. But, today’s button will be more fascinating.

Buttons are the clickable object on the webpage, that redirects us to another page or use to submit our data. The button can have different functionality, some button has saving or downloading file functionality, some has submitted user login id and password, and some button has added to cart option that we can see on the e-commerce. Basically, buttons can have various functions according to the webpage, website, apps, and others.

Let’s have a quick look at the given image of our project [Button Animation], as you can see on the image at first button has “add to cart” text and in the second button there is a spinner and “loading” text, and in the last button, there is a check icon and “done” text. Actually, according to this project, there will be the first button and when you click on that button, the spinner and “loading” text appear, and the spinner starts to spin, after a few time the check icon appear with “done text”.

Now the given video tutorial helps us to watch the real demo of our project [Button Animation] and all the HTML CSS and JavaScript that I have used to create this button with an animation.

Button Animation in HTML CSS & JavaScript | Video Tutorial

I will provide all the HTML CSS and JavaScript code that I have used to create this animated button. Before getting into the source code file, I would like to briefly explain the given video tutorial of our project [Button Animation].

As you have seen in the video tutorial of our project [Button Animation]. At first, there was a button with “add to cart” text, when I clicked on that button, a spinner appeared with a “loading” text, and that spinner started to spring at the same time. After a few seconds, a check icon appeared and “loading” text turn into “done” text. The overall animation was quite an awesome right?. To make this button I used HTML and CSS only, the transition was created by CSS cubic-bezier. To change the icon and text I used some JavaScript code.

I hope now you can build this button with animation using HTML CSS and JavaScript. If you are feeling difficulty creating this project, I have provided all the source code below.

Button Animation [Source Code]



    
    
        
        
        
         Button with Loading Animation 

        
        
                                
        
        
        
    
    
        
            
            Add to Cart

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button{
    display: flex;
    align-items: center;
    padding: 20px 36px;
    border-radius: 8px;
    background-color: #4070f4;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    user-select: none;
}
.button .icon{
    font-size: 28px;
    color: #fff;
    margin-right: 10px;
    display: none;
}
.button.checked .icon{
    display: flex;
}
.icon.spinner.spin{
    animation: spin 1.3s ease-in-out infinite;
}
@keyframes spin {
    100%{
        transform: rotate(360deg);
    }
}
.icon.check{
    display: inline-flex;
    height: 32px;
    width: 32px;
    font-size: 18px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background-color: #6e93f7;
}
.button .btn-text{
    font-size: 32px;
    font-weight: 400px;
    color: #fff;
}

Create Toggle Button in HTML CSS & JavaScript

CodingNepal — Tue, 28 Jun 2022 21:11:20 +0000

Hello buddy I hope you are doing and creating awesome projects. As always, today I have brought an interesting project for you and that is an Animated Toggle Button. In this project, you will learn to create an animated Toggle Button using HTML CSS, and JavaScript. The interesting part is that this toggle button is in a heart shape which makes this toggle button more fascinating than a normal toggle button.

A toggle button is a button that is used to turn on or off. For example, On the computer, we need to turn on the toggle button to connect the wifi. As with this, we can use the toggle button in lots of sections on the internet.

Have a quick look at the given image of our Toggle Button. The toggle button is in a heart shape, inside the heart shape we can see a circle. Actually on the left side toggle button is in off status and the right is in on status. When you click on the toggle button the inner circle moves and at the same time hear color also changes.

Let’s watch the demo of this toggle button, and how it works and is animated. I watched the given video tutorial, you will watch the demo of this toggle button and also all the HTML CSS, and JavaScript code that I have used to create this button.

Video Tutorial Toggle Button HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript code that I have used to create this toggle button. Before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial. At first, we have seen a toggle button in the heart shape, inside the heart shape there was a circle. When I clicked on the toggle of heart shape the inner circle moved right and the heart color also changed to pink. Same as this when I again clicked on the toggle button the inner circle moved to the left and hear color changed to white. To make the heart shape and inner circle, I have used HTML and CSS, and to move the inner circle and heart’s background color, I have used some JavaScript code.

Now, I believe you can create this type of toggle button using HTML CSS, and JavaScript. If you are feeling difficulty building this, I have provided all the code below.

Animate Toggle Button [Source Code]

To get the following HTML CSS and JavaScript code for the Toggle Button you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.



    
    
        
        
        
        Animated Toggle Button

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e2e2e2;
}
.heart{
  position: relative;
  height: 70px;
  width: 70px;
  background-color: #fff;
  transform: rotate(-45deg);
  border-bottom-left-radius: 100px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
.heart::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: -50%;
  left: 0;
  border-radius: 50px;
  background-color: #fff;
}
.heart::after{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: -50%;
  border-radius: 50px;
  background-color: #fff;
}
.heart, .heart::before, .heart::after{
  transition: 0.6s;
  transition-delay: 0.3s;
}
.heart.forward,.heart.forward::before,
.heart.forward::after{
  background-color: #eb608c;
}
.circle {
  position: absolute;
  height: 55px;
  width: 55px;
  left: 7px;
  top: -28px;
  border-radius: 50%;
  z-index: 100;
  transition: 0.6s;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.heart.forward .circle{
  animation: move 0.6s forwards;
}
@keyframes move {
  0%{
    left: 7px;
    top: -28px;
  }
  50%{
    top: -1px;
    left: 17px;
  }
  100%{
    left: 42px;
    top: 7px;
  }
}

.heart.reverse .circle{
  animation: back1 0.6s forwards;
}
@keyframes back1 {
  0%{
    left: 42px;
    top: 7px;
  }
  50%{
    left: 17px;
    top: 1px;
  }
  100%{
    left: 7px;
    top: -28px;
  }
}

Toast Notification with Progress Bar in HTML CSS & JavaScript

CodingNepal — Mon, 14 Mar 2022 21:11:19 +0000

Hello friend I hope you are doing well. Today we are going to learn how to create an Animated Toast Notification with Progress Bar in HTML CSS & JavaScript. There are lots of Animated Popup Boxes I have created but now we will learn to create an advanced version of pop-up boxes.

Toast Notification is the message box that appears from any side of the gadget screen, mainly from the right top side. The message can be a warning message, error message, or some positive message.

Let’s have a quick look at the given image of our project [Animated Toast Notification with Progress Bar]. At the top, we can see our toast with a progress bar and one cancel button, below it is one button. Actually, at first, there will only be a button, and when we click on the button that toast will appear with progressing bar. Basically, when progress is finished, progressed the toast will automatically disappear or we can close that toast by clicking on the close button.

Now we are going to watch the real demo of this project and the full video tutorial which help you to take ideas on how all HTML CSS and JavaScript are working perfectly behind this project.

Toast Notification with Progress Bar in HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript code that I have used to create this Animated Toast Notification with Progress Bar, before jumping into the source code file, you need to know some basic printouts of this video tutorial.

As you have seen on the video tutorial of Animated Toast Notification with Progress Bar. At first, we have seen only a button on the screen. When I clicked on the button toast notification slides from the left top side and the progress bar also started. After the progress bar is finished to progress, the toast notification automatically disappeared. I could close that toast by clicking on the close button, that was available on the toast.

The toast and button and of course are made from HTML and CSS, and to animated it I have used some JavaScript code. You can also make it by using HTML and CSS but we will get an issue, when we click on the toast’s close button progress bar got filled.

I hope now you got the basic concept of this project [Toast Notification with Progress Bar], and how it can be made, if you are feeling difficulty creating, I have provided all

Toast Notification with Progress Bar [Source Code]

To take the source code of this Toast Notification with Progress Bar first, you need to create two files: an HTML file and a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.





    
    
    

    
    

    
    

    Toast Notification with Progress Bar  




    
        
            

            
                Success
                Your changes has been saved

/* Google Font Import - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
    overflow: hidden;
}

.toast{
    position: absolute;
    top: 25px;
    right: 30px;
    border-radius: 12px;
    background: #fff;
    padding: 20px 35px 20px 25px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    border-left: 6px solid #4070f4;
    overflow: hidden;
    transform: translateX(calc(100% + 30px));
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}

.toast.active{
    transform: translateX(0%);
}

.toast .toast-content{
    display: flex;
    align-items: center;
}

.toast-content .check{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    background-color: #4070f4;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
}

.toast-content .message{
    display: flex;
    flex-direction: column;
    margin: 0 20px;
}

.message .text{
    font-size: 20px;
    font-weight: 400;;
    color: #666666;
}

.message .text.text-1{
    font-weight: 600;
    color: #333;
}

.toast .close{
    position: absolute;
    top: 10px;
    right: 15px;
    padding: 5px;
    cursor: pointer;
    opacity: 0.7;
}

.toast .close:hover{
    opacity: 1;
}

.toast .progress{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #ddd;
}

.toast .progress:before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: #4070f4;
}

.progress.active:before{
    animation: progress 5s linear forwards;
}

@keyframes progress {
    100%{
        right: 100%;
    }
}

button{
    padding: 12px 20px;
    font-size: 20px;
    outline: none;
    border: none;
    background-color: #4070f4;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

button:hover{
    background-color: #0e4bf1;
}

.toast.active ~ button{
    pointer-events: none;
}

const button = document.querySelector("button"),
      toast = document.querySelector(".toast")
      closeIcon = document.querySelector(".close"),
      progress = document.querySelector(".progress");

      let timer1, timer2;

      button.addEventListener("click", () => {
        toast.classList.add("active");
        progress.classList.add("active");

        timer1 = setTimeout(() => {
            toast.classList.remove("active");
        }, 5000); //1s = 1000 milliseconds

        timer2 = setTimeout(() => {
          progress.classList.remove("active");
        }, 5300);
      });
      
      closeIcon.addEventListener("click", () => {
        toast.classList.remove("active");
        
        setTimeout(() => {
          progress.classList.remove("active");
        }, 300);

        clearTimeout(timer1);
        clearTimeout(timer2);
      });

If you face any difficulties while creating your Animated Toast Notification or your code is not working as expected, you can download the source code files for this Toast for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Button Animation – CodingNepal

Button Click Animation in HTML CSS & JavaScript

Video Tutorial of Button Click Animation

Steps to Create a Button Click Animation

1. File Structure of the Project

2. Creating Button Click Animation

Conclusions and Final Words

Star Rating in HTML CSS & JavaScript

Video Tutorial | Star Rating in HTML CSS & JavaScript

You May Like This:

Star Rating in HTML CSS & JavaScript [Source Code]

Create Toggle Dark/Light Mode in HTML & CSS

Toggle Button Dark/Light Mode in HTML CSS | Video Tutorial

You May Like This:

Toggle Button Dark/Light Mode in HTML & CSS [Source Code]

Custom Range Slider in HTML CSS & JavaScript

Custom Range Slider in HTML CSS & JavaScript | Video Tutorial

You May Like This:

Custom Range Slider [Source Codes]

Toggle Button Dark Light Mode in HTML CSS & JavaScript LocalStorage

Toggle Button Dark Light Mode in JavaScript | LocatStorage

You May Like This:

Toggle Button with Dark Light Mode [Source Code]

Social Media Navigation Button in HTML CSS & JavaScript

Social Media Navigation Button in HTML CSS & JavaScript

You Might Like This:

Social Media Navigation Button [Source Code]

How to Create Toggle Button in HTML CSS & JavaScript

Create Toggle Button in HTML CSS & JavaScript | Video Tutorial

You Might Like This:

Toggle Button [Source Code]

Button Animation in HTML CSS & JavaScript

Button Animation in HTML CSS & JavaScript | Video Tutorial

You Might Like This:

Button Animation [Source Code]

Create Toggle Button in HTML CSS & JavaScript

Video Tutorial Toggle Button HTML CSS & JavaScript

You Might Like This:

Animate Toggle Button [Source Code]

Toast Notification with Progress Bar in HTML CSS & JavaScript

Toast Notification with Progress Bar in HTML CSS & JavaScript

You Might Like This:

Toast Notification with Progress Bar [Source Code]