CSS Buttons – 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!

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.

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;
  }
}

JavaScript Button with Increment and Decrement Number

CodingNepal — Fri, 08 Oct 2021 21:11:19 +0000

Hello, friends hope you all are doing well. Today in this HTML CSS and JavaScript Project, we are going to create buttons with increment and decrement numbers. As you know I have created lots of awesome and useful JavaScript projects and it will be one of them.

Increment and decrement the number means the way of increasing and decreasing number. This type of feature is mostly used on the E-commerce product card to order how many products users want to order to buy.

Let’s have a look at the given image of Button with Increment and Decrement Number using HTML CSS and JavaScript. Basically when you click on the plus button the center number increase by one, as when you click on the minus button center number decrease by one.

Now we watch the real virtual example of this projects, how number increases and decreases and all the code I have used to build this program [JavaScript Button with Increment and Decrement Number].

Button with Increment & Decrement Number | Video

You can download all the source code of this project [JavaScript Button with Increment and Decrement Number] from below, before jumping on the source code file, you need to know some basic things of this HTML CSS and JavaScript project.

As you have seen on the video tutorial of this JavaScript Button with Increment and Decrement Number. At first, we have seen number one at the center of the two-button. When I clicked on the plus button that number turns into “two” and when I clicked again it turns into “three” this increase and decrease with every click.

To make this program [ Button with Increment and Decrement Number], I have used HTML CSS, and JavaScript. Have you noticed that we can’t decrease the number to less than one?

I hope now you cant make this project easily, those friends who are feeling difficult to create this, I have provided all the source code of this JavaScript Button with Increment and Decrement Number below:

Button with Increment & Decrement Number [Source Code]

To get the following HTML CSS and JavaScript code for the Button with Increment and Decrement Number, 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.




  
    
      Increment & Decrement Button | CodingLab  
    
   

  
    -
    01
    +

/* Google fonts import link */
@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;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #343F4F;
}
.wrapper{
  height: 120px;
  min-width: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF;
  border-radius: 12px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.wrapper span{
  width: 100%;
  text-align: center;
  font-size: 55px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.wrapper span.num{
  font-size: 50px;
  border-right: 2px solid rgba(0,0,0,0.2);
  border-left: 2px solid rgba(0,0,0,0.2);
  pointer-events: none;
}

If you face any difficulties while creating your Button Click Animation or your code is not working as expected, you can download the source code files for this Add to Card 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.

Button with Progress Bar using HTML CSS and JavaScript

CodingNepal — Sat, 25 Sep 2021 21:11:19 +0000

Hello friends, welcome to another project on HTML CSS and JavaScript. Today in this project we are going to create a beautiful and useful design and animation. As you know I have built lots of JavaScript Projects which are very useful and practical.

A button with a progress bar means the animation appears after clicking on the button to show the user’s work is loading. Nowadays, this type of concept is getting used rapidly day by day because it takes less space on the webpage and looks very beautiful.

Let’s have a look at the given image of our program [Button with Progress Bar], the first button you are seeing will be the first look at your project and when we click on that button, its height and width will be converted into the second image and stars progressing. When the progressing bar finished progressing then that progress was converted into the button. And those texts and icons also change.

Now lets we will watch the video tutorial of this Butonn and its progressing animation. Also, we will take ideas on how all the HTML CSS, and JavaScript are working behind in the project.

Button with Progress Bar in HTML CSS JavaScript

I have provided all the HTML CSS and JavaScript code that I had have to create this project [Button with Progress Bar using HTML CSS and JavaScript], but before jumping into the source code file, I have pointed out some important points of this video tutorial of the button with progress bar.

As we have seen in the video tutorial this button with the progress bar. At first, we have seen only the button on the screen with text and a download icon. When I clicked on that button it turns into a progress bar and starts animating. At last when the progress bar finished its animation then it turned into a button with different text and icons.

To make the design of the button and progress bar, I have used HTML and CSS code only, and to make the button and progress bar animation, I have used some JavaScript code.

I believe this type of project is easy for you, those friends who are feeling difficulty building this program [Button with Progress Bar using HTML CSS and JavaScript], I have provided all HTML CSS and JavaScript source code files below.

Button with Progress Bar [Source Code]

To get the following HTML CSS and JavaScript code for the Button with Progress Bar, 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.




  
    
     Button with Progress Bar | CodingLab  
    
    
    
   

  
      
        
        Download

@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;
}
.button{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 95px;
  width: 360px;
  background: #7D2AE8;
  border-radius: 55px;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  overflow: hidden;
}
.button.active{
  height: 20px;
  width: 500px;
}
.button::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: #5b13b9;
  border-radius: 55px;
  transition: all 6s ease-in-out;
}
.button.active::before{
  animation: layer 6s ease-in-out forwards;
}
@keyframes layer {
  100%{
    left: 0%;
  }
}
.button .content{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  transition-delay: 0.2s;
}
.button.active .content{
  transform: translateY(60px);
}
.button .content i,
.button .content .button-text{
  color: #fff;
  font-size: 40px;
  font-weight: 500;
}
.button .content .button-text{
  font-size: 28px;
  margin-left: 8px;
}

If you face any difficulties while creating your Button with Progress Bar or your code is not working as expected, you can download the source code files for this Button with Progressing Bar 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 with Progress Bar in HTML CSS and JavaScript

CodingNepal — Fri, 30 Jul 2021 21:11:18 +0000

Hello friends, welcome to my other blog, today we are going to create a Button with progress in HTML CSS, and JavaScript. As you guys know earlier I have created a button ripple animation which you have loved so much. I hope this button with the progress bar program will be material content for you.

A progress bar is an animation that appears while the window, website, and other digital pages are going to open. The progressing bar or animation could be in different designs like in numbers, horizontal-vertical form, and circular form.

I have combined the progress bar animation inside the button as you can have a look, I have given on the webpage. Actually in this program [Button with progress bar in HTML CSS and JavaScript], at the first button, there is only one button and while we clicked on it progress bar starts and takes some time to complete. With the progress bar, we will see the changing texts of the button.

Let’s have a look at the real example of a button with progress. I highly recommend you to watch the full video tutorial then you will get an idea that how all codes are working perfectly on this program.

Video Tutorial of Button with Progress Bar

I have provided all the source code of this program[Button with Progress Bar in HTML CSS and JavaScript], Before jumping on the source code files, You have to know some important points of this program.

As you have seen in the video, at first we have seen one button with the text “Upload File” when I clicked on the button the progress bar starts appears from the left side and started to move at the right side, and the button’s text changes into the uploading” and when the progress bar completed button’s text change into “Uploaded”.

To make this progress bar animation I have used CSS animation property and to change the text I have used little JavaScript. Yeah, we could make this with only CSS code but we have to write code more that’s why rather than using the only CSS I went to JavaScript code.

I believe now you could make this program easily [Button with Progress Bar in HTML CSS and JavaScript], if you want to use the only CSS then you and done by HTML’s radio button. Those friends who are feeling difficulty building this progressing animation on the button then you can get all source code files below;

Button with Progress Bar [Source Code]

Before copying the given code of Button with Progressing Bar, 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 codes in your documents. You can also directly download all source code files from the given download button.




  
    
      Button with Progress Bar | CodingLab  
    
    
    
   

  
    
      
      Upload File

@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: #F4F7FF;
}
.button{
  position: relative;
  height: 55px;
  max-width: 300px;
  width: 100%;
  background: #7d2ae8;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  overflow: hidden;
}
.button::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
}
.button.progress::before{
  animation: progress 6s ease-in-out forwards;
}
@keyframes progress {
  0%{
    left: -100%;
  }
  10%{
    left: -97%;
  }
  20%{
    left: -92%;
  }
  30%{
    left: -82%;
  }
  30%{
    left: -62%;
  }
  40%{
    left: -38%;
  }
  50%{
    left: -18%;
  }
  60%{
    left: -14%;
  }
  80%{
    left: -7%;
  }
  90%{
    left: -3%;
  }
  100%{
    left: 0%;
  }
}
.button .text-icon{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button .text-icon i,
.button .text-icon span{
  position: relative;
  color: #fff;
  font-size: 26px;
}
.button .text-icon span{
  font-size: 20px;
  font-weight: 400;
  margin-left: 8px;
}

If you face any difficulties while creating your Button with Progress Bar or your code is not working as expected, you can download the source code files for this Button and Progressing Bar 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 Ripple Animation in HTML CSS and JavaScript

CodingNepal — Fri, 16 Jul 2021 21:11:18 +0000

Hello guys hope you are doing well, after a long time, today we are going to create something useful animation and that is Button Ripple Animation in HTML CSS and JavaScript. Also, I want to thank you all for liking my previous blog about All Hamburger Animation.

Button ripple animation is that appears on the button’s surface while the user clicks on it. Basically, this type of ripple animation is used to showing confirmation that the button has clicked. There are various animations we can get while clicking on the button, but ripple is the most popular.

Let’s have a look at the image of [Button Ripple Animation in HTML CSS and JavaScript] that I have provided on the webpage. Two images of the button are in normal form and two buttons are in the animated form and these are the real animation that is going to build.

Without further ado let’s watch the video tutorial of this program [Button Ripple Animation in HTML CSS and JavaScript], then we will get the real demo of this ripple animation on the button and the code that I have used to create this type of animation.

Button Ripple Animation in HTML CSS and JavaScript

I have provided all the source code that I have used to create this program [Button Ripple Animation in HTML CSS and JavaScript], but before jumping for the code let me cover some important points of this ripple effect on the button.

As you have seen on the video tutorial of this program [Button Ripple Animation in HTML CSS and JavaScript]. At first, we saw two-button with gradient color and this gradient color has a big hand to make this button beautiful like candy.

Actually, that ripple is an HTML tag with the class name “Ripple” which I did CSS and gave the animation and when the user clicks on the button I added that tag on the HTML by JavaScript. Have you noticed that where ever I clicked, the ripples start from there? Also to make this I have used some JavaScript code.

This is the simple but tricky animation that we have created. If you are still feeling difficulties to build this animation then you can copy-paste or download all source code files of our program [Button Ripple Animation in HTML CSS and JavaScript] from below.

Button Ripple Animation [Source Code]

To get the following source code of out today’s program [Button Ripple Animation in HTML CSS and JavaScript], 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.




  
    
     Button Ripple Effect | CodingLab  
    
   

  
    Button
    Button

/* Google Font Link */
@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: #350048;
}
.buttons .button{
  position: relative;
  display: inline-block;
  color: #fff;
  padding: 12px 38px;
  background: linear-gradient(90deg, #6616d0, #ac34e7);
  border-radius: 45px;
  margin: 10px;
  font-size: 30px;
  font-weight: 400;
  text-decoration: none;
  box-shadow: 3px 5px rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0,0,0,0.1);
  overflow: hidden;
}
.buttons .button.two{
  background: linear-gradient(90deg, #025ce3, #4e94fd);
}
.buttons .button .overlay{
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  animation: blink 0.5s linear;
}
@keyframes blink {
  0%{
    height: 0px;
    width: 0px;
    opacity: 0.3;
  }
  100%{
    height: 400px;
    width: 400px;
    opacity: 0;
  }
}

If you face any difficulties while creating your Button Ripple Animation or your code is not working as expected, you can download the source code files for this Button Click Animation 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.

All Hamburger Menu Animation in HTML CSS and JavaScript

CodingNepal — Sun, 11 Jul 2021 21:11:18 +0000

Hello friends. To we are going to learn to create all Hamburger Menu Animation in HTML CSS and JavaScript. Recently I have used this type of animation in my various Sidebar Designs. Now Let’s jump into our program[Hamburger Menu Animation].

Basically, the hamburger menu is used in the sidebar as a button to open or close the sidebar. At first, the hamburger icon is in three-line shapes, and when the user clicks the hamburger menu star to be animated.

Have a look at the given image of our design [Hamburger Menu Animation], The upper image is the rest condition of our hamburger, when the user clicks on every hamburger icon then it’s smoothly animated like on the second image.

If you are wondering to see the real demo of this Hamburger Menu and see the codes that I have used to create this design and animation, please watch the given video tutorial.

All Hamburger Menu Animation in HTML CSS

I have provided all the source code of this Hamburger Menu Animation below. Before jumping into the source code let’s talk about some important points ou this video tutorial of those Animated Hamburger menus.

At first, you have seen all the hamburger menus are in rest form, when I have clicked on every hamburgers icon then they start to animated into another icon. You can add any hamburger to your design. All the icons that I have used are brought from boxicons.com, you can also bring from the popular website fontawesome.com

I believe, now you can build this type of hamburger menu animation easily, if you are feeling difficulties to create then you can copy or download all the code that I have used to create this hamburger menu animation.

You Might Like This:

Following is the source code for our Animated Hamburger Menu, before copy-paste the following source code you have to create two files, one is the HTML file and another is the CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source code by clicking on the given download button.




  
    
      All Hamburger Menu Transformtion | CodingLab

/* Google Font Link */
@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{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FF676D;
  padding: 0 20px;
}
.box{
  display: flex;
  align-items: center;
  background: #fff;
  /* box-shadow: 0 5px 10px rgba(0,0,0,0.2); */
  padding: 20px 15px;
  border-radius: 6px;
  /* transform: scale(1.5); */
}
.box .icon{
  position: relative;
  height: 65px;
  width: 65px;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 6px;
  cursor: pointer;
  margin: 0 8px;
  transition: all 0.3s ease;
}
.box .icon.active{
  background: #FF676D;
}
.box .icon.line.active{
  background: #FFF;
}
.icon i{
  position: absolute;
  font-size: 50px;
  left: 50%;
  top: 50%;
  color: #333;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: all 0.3s ease;
}
.icon.active i{
  color: #fff;
}
.icon.line.active i{
  color: #333;
}
 .icon i.close{
  opacity: 0;
}
 .icon.active i.close{
  opacity: 1;
  transform: translate(-50%, -50%) rotate(180deg);
}
 .icon.active i.open{
  opacity: 0;
  transform: translate(-50%, -50%) rotate(180deg);
}
 .icon.line.active i.close{
  transform: translate(-50%, -50%) rotate(0deg);
}
 .icon.line.active i.open{
  transform: translate(-50%, -50%) rotate(0deg);
}

If you face any difficulties while creating your All Hamburger Menu Animation or your code is not working as expected, you can download the source code files for this Hamburger Menu Click Animation 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.

CSS Buttons – 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

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]

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]

JavaScript Button with Increment and Decrement Number

Button with Increment & Decrement Number | Video

You Might Like This:

Button with Increment & Decrement Number [Source Code]

Button with Progress Bar using HTML CSS and JavaScript

Button with Progress Bar in HTML CSS JavaScript

You Might Like This:

Button with Progress Bar [Source Code]

Button with Progress Bar in HTML CSS and JavaScript

Video Tutorial of Button with Progress Bar

You Might Like This:

Button with Progress Bar [Source Code]

Button Ripple Animation in HTML CSS and JavaScript

Button Ripple Animation in HTML CSS and JavaScript

You Might Like This:

Button Ripple Animation [Source Code]

All Hamburger Menu Animation in HTML CSS and JavaScript

All Hamburger Menu Animation in HTML CSS

You Might Like This: