button click animation – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Mon, 15 May 2023 09:01:33 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Button Click Animation in HTML CSS & JavaScript https://www.codingnepalweb.com/button-click-animation-html-css-javascript/ https://www.codingnepalweb.com/button-click-animation-html-css-javascript/#respond Sat, 07 Jan 2023 21:11:21 +0000 https://www.codingnepalweb.com/?p=4124 Button Click Animation in HTML CSS & JavaScript

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

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Button Click Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <button class="button">Click Me</button>

    <script>
      const button = document.querySelector(".button");

      button.addEventListener("click", (e) => {
        e.preventDefault;
        button.classList.add("animate");
        setTimeout(() => {
          button.classList.remove("animate");
        }, 600);
      });
    </script>
  </body>
</html>

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!

 

]]> https://www.codingnepalweb.com/button-click-animation-html-css-javascript/feed/ 0 Draggable Circular Navigation Menu in HTML CSS & JavaScript https://www.codingnepalweb.com/draggable-circular-navigation-menu-html-css-javascript/ https://www.codingnepalweb.com/draggable-circular-navigation-menu-html-css-javascript/#respond Tue, 27 Dec 2022 21:11:19 +0000 https://www.codingnepalweb.com/?p=4193 Draggable Circular Navigation Menu in HTML CSS & JavaScript

Hello friend I hope you are doing awesome. Today in this blog you will learn How to make a Draggable Circular Navigation Menu using HTML CSS and JavaScript. As you know there are lots of Navigation Designs I have created with responsive features and hover animations. Till I have not created circular navigation menu with draggable features.

Circular Navigation Menu is combination of the various navigation links in circle shape. It is the latest and popular shape of the navigation menu because it take less space on the screen and has good user experience.

Lest have a look on the given image of our circular navigation menu or you can call it half circle navigation menu. Overall there are five navigation links and one toggle button in the center. Actually, at first all those navigation links are in hidden and only toggle button is appeared. When we click on that toggle button then all navigation links starts appearing with beautiful animation. We can drag this navigation menu to bottom to top, where ever we like to place.

Rather than theoretically I would  highly recommend you to watch the given video tutorials of our Draggable circular navigation menu. By watching the given video you will not only saw the demo, you will also get the idea how all HTML CSS and JavaScript code are working perfectly behind this beautiful navigation menu.

Draggable Circular Navigation Menu in HTML CSS & JavaScript

I have provided all HTM CSS and JavaScript code of this Draggable Circular Navigation Menu that I have used to create. Before jumping into the source code you need to know some information of this video tutorial of this navigation menu.

As you have seen on the video tutorial of this draggable circular navigation menu using HTML CSS and JavaScript. At first we have seen on toggle button with plus icon at the right top side. When I clicked on the toggle button five navigation links appears with beautiful animation. We could drag it easily to top to bottom which make this navigatin more attractive.

To show and hide those navigation menu while click on the toggle button and to make it draggable  I have  used JavaScript code and other UI design are made by HTML and CSS. All fonts are brought form boxicons.

I hope now you are able to create this type of draggable circular navigation menu, if not, I have provided all the HTML CSS and JavaScript code below.

You Might Like This:

Circular Navigation Menu [Source Code]

To get the following HTML and CSS code for an Animated and Draggable Circular Navigation Menu. 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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Draggable Navigation Menu | Codinglab</title>
  <link rel="stylesheet" href="style.css">
  <!-- Boxicons CSS -->
  <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
  <nav>
    <div class="nav-content">
      <div class="toggle-btn">
        <i class='bx bx-plus'></i>
      </div>
      <span style="--i:1;">
        <a href="#"><i class='bx bxs-home'></i></a>
      </span>
      <span style="--i:2;">
        <a href="#"><i class='bx bxs-camera'></i></a>
      </span>
      <span style="--i:3;">
        <a href="#"><i class='bx bxs-alarm' ></i></a>
      </span>
      <span style="--i:4;">
        <a href="#"><i class='bx bxs-map' ></i></a>
      </span>
      <span style="--i:5;">
        <a href="#"><i class='bx bxs-cog' ></i></a>
      </span>
    </div>
  </nav>

  <script>

  // getting HTML elements
  const nav = document.querySelector("nav"),
        toggleBtn = nav.querySelector(".toggle-btn");

    toggleBtn.addEventListener("click" , () =>{
      nav.classList.toggle("open");
    });

  // js code to make draggable nav
  function onDrag({movementY}) { //movementY gets mouse vertical value
    const navStyle = window.getComputedStyle(nav), //getting all css style of nav
          navTop = parseInt(navStyle.top), // getting nav top value & convert it into string
          navHeight = parseInt(navStyle.height), // getting nav height value & convert it into string
          windHeight = window.innerHeight; // getting window height

    nav.style.top = navTop > 0 ? `${navTop + movementY}px` : "1px";
    if(navTop > windHeight - navHeight){
      nav.style.top = `${windHeight - navHeight}px`;
    }
  }

  //this function will call when user click mouse's button and  move mouse on nav
  nav.addEventListener("mousedown", () =>{
    nav.addEventListener("mousemove", onDrag);
  });

  //these function will call when user relase mouse button and leave mouse from nav
  nav.addEventListener("mouseup", () =>{
    nav.removeEventListener("mousemove", onDrag);
  });
  nav.addEventListener("mouseleave", () =>{
    nav.removeEventListener("mousemove", onDrag);
  });

  </script>

</body>
</html>

 *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  background: #17a2b8;
  overflow: hidden;
}
nav{
  position: absolute;
  top: 20px;
  right: 0;
  width: 80px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
nav .nav-content{
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
}
.nav-content .toggle-btn,
.nav-content span a{
  height: 60px;
  width: 60px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}
.nav-content .toggle-btn{
  font-size: 35px;
  color: #0e2431;
  z-index: 100;
  cursor: pointer;
  transform: rotate(-225deg);
  transition: all 0.6s ease;
}
nav.open .toggle-btn{
  transform: rotate(0deg);
}
.nav-content span{
  position: absolute;
  transition: all 0.6s ease;
  opacity: 0;
}
nav.open .nav-content span{
  transform: rotate(calc(var(--i) * (360deg/8))) translateY(120px);
  opacity: 1;
}
.nav-content span a{
  text-decoration: none;
  transform: rotate(45deg);
}
.nav-content span a i{
  font-size: 24px;
  color: #0e2431;
  transform: rotate(calc(var(--i) * (360deg/ -8)));
  opacity: 0.8;
  transition: 0.2s;
}
.nav-content span a:hover i{
  opacity: 1;
}

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

]]> https://www.codingnepalweb.com/draggable-circular-navigation-menu-html-css-javascript/feed/ 0 Star Rating in HTML CSS & JavaScript https://www.codingnepalweb.com/star-rating-html-css-javascript-2/ https://www.codingnepalweb.com/star-rating-html-css-javascript-2/#respond Fri, 16 Dec 2022 21:11:21 +0000 https://www.codingnepalweb.com/?p=4129 Star Rating in HTML CSS & JavaScript

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.

You May Like This:

Star Rating in HTML CSS & JavaScript [Source Code]

To create Star Rating in HTML CSS & JavaScript, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. 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.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-pUA-Compatible" content="ie=edge" />
    <title>Star Rating in HTML CSS & JavaScript</title>
    <link rel="stylesheet" href="style.css" />
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
   <script src="script.js" defer></script>
  </head>
  <body>
    <div class="rating-box">
      <header>How was your experience?</header>
      <div class="stars">
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
        <i class="fa-solid fa-star"></i>
      </div>
    </div>
  </body>
</html>

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

 

]]> https://www.codingnepalweb.com/star-rating-html-css-javascript-2/feed/ 0 Social Media Navigation Button in HTML CSS & JavaScript https://www.codingnepalweb.com/media-icons-navigation-html-css-javascript/ https://www.codingnepalweb.com/media-icons-navigation-html-css-javascript/#respond Mon, 22 Aug 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4163 Social Media Navigation Button in HTML CSS & JavaScript

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.

You Might Like This:

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.

 

<!DOCTYPE html>
<!-- Coding by CodingLab | www.codinglabweb.com-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!--<title>Social Media Navigation Buttons</title>-->
    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />
    <!-- Fontawesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
    />
  </head>
  <body>
    <div class="container">
      <span class="close-btn">
        <i class="fa-solid fa-xmark"></i>
      </span>

      <div class="media-icons">
        <a href="#" style="background: #e60023">
          <i class="fa-brands fa-pinterest"></i>
          <span class="tooltip" style="color: #e60023">Pinterest</span>
        </a>
        <a href="#" style="background: #0e76a8">
          <i class="fa-brands fa-linkedin"></i>
          <span class="tooltip" style="color: #0e76a8">Linkedin</span>
        </a>
        <a href="#" style="background: #ff0000">
          <i class="fa-brands fa-youtube"></i>
          <span class="tooltip" style="color: #ff0000">YouTube</span>
        </a>
        <a href="#" style="background: #ea4689">
          <i class="fa-brands fa-dribbble"></i>
          <span class="tooltip" style="color: #ea4689">Dribbble</span>
        </a>
        <a href="#" style="background: #8e36ff">
          <i class="fa-brands fa-github"></i>
          <span class="tooltip" style="color: #8e36ff">Github</span>
        </a>
        <a href="#" style="background: #4267b2">
          <i class="fa-brands fa-facebook-f"></i>
          <span class="tooltip" style="color: #4267b2">Facebook</span>
        </a>
        <a href="#" style="background: #1da1f2">
          <i class="fa-brands fa-twitter"></i>
          <span class="tooltip" style="color: #1da1f2">Twitter</span>
        </a>
      </div>
    </div>

    <script>
      const closeBtn = document.querySelector(".close-btn");

      closeBtn.addEventListener("click", () => {
        closeBtn.classList.toggle("open");
      });
    </script>
  </body>
</html>

/* 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.

]]> https://www.codingnepalweb.com/media-icons-navigation-html-css-javascript/feed/ 0 Button Animation in HTML CSS & JavaScript https://www.codingnepalweb.com/button-animation-html-css-javascript/ https://www.codingnepalweb.com/button-animation-html-css-javascript/#respond Sun, 10 Jul 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4170 Button Animation in HTML CSS & JavaScript

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.

You Might Like This:

Button Animation [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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Button with Loading Animation </title>

        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css">
                                
        <!-- Fontawesome CDN Link -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
        
    </head>
    <body>
        <div class="button">
            <i class="fa-solid fa-circle-notch icon spinner"></i>
            <span class="btn-text" user-selcect="none">Add to Cart</span>
        </div>

        <script>
            let btn = document.querySelector(".button"),
                spinIcon = document.querySelector(".spinner"),
                btnText = document.querySelector(".btn-text");

            btn.addEventListener("click", () => {
                btn.style.cursor = "wait";
                btn.classList.add("checked");
                spinIcon.classList.add("spin");
                btnText.textContent = "Loading";

            setTimeout(() => {
                btn.style.pointerEvents = "none";
                spinIcon.classList.replace("spinner", "check");
                spinIcon.classList.replace("fa-circle-notch", "fa-check");
                btnText.textContent = "Done";

            }, 4500) //1s = 1000ms
            });
        </script>
    </body>
</html>

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

 

 

]]> https://www.codingnepalweb.com/button-animation-html-css-javascript/feed/ 0 Button Ripple Animation in HTML CSS and JavaScript https://www.codingnepalweb.com/button-ripple-animation-in-html-css-and-javascript/ https://www.codingnepalweb.com/button-ripple-animation-in-html-css-and-javascript/#respond Fri, 16 Jul 2021 21:11:18 +0000 https://www.codingnepalweb.com/?p=4212 Button Ripple Animation in HTML CSS and JavaScript

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.

You Might Like This:

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.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Button Ripple Effect | CodingLab </title> 
    <link rel="stylesheet" href="style.css">
   </head>
<body>
  <div class="buttons">
    <a class="button"href="#">Button</a>
    <a class="button two" href="#">Button</a>
  </div>

  <script>
  // Ripple Effect JavaScript Code
  let buttons = document.querySelectorAll(".button");

  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", (e)=>{
      e.preventDefault(); // preventing form submitting

      let overlay = document.createElement('span'); //creating a tag(span)
      overlay.classList.add("overlay"); //adding a class inside the span
      e.target.appendChild(overlay); //adding overlay tag inside the anchor tag at in HTML

      let xValue = e.clientX - e.target.offsetLeft; //by this we get perfect value where we will click
      let yValue = e.clientY - e.target.offsetTop; //by this we get perfect value where we will click

       overlay.style.left = xValue + "px"; //changing the position of the overlay according to our clicks on the button
       overlay.style.top = yValue + "px"; //changing the position of the overlay according to our clicks on the button
  });
  }
  </script>
</body>
</html>

/* 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.

]]> https://www.codingnepalweb.com/button-ripple-animation-in-html-css-and-javascript/feed/ 0 Custom Radio Button using HTML & CSS https://www.codingnepalweb.com/custom-radio-button-using-html-css/ https://www.codingnepalweb.com/custom-radio-button-using-html-css/#respond Fri, 01 Jan 2021 21:09:27 +0000 https://www.codingnepalweb.com/?p=4245 Custom Radio Button using HTML & CSSHello Reader, today in this blog I’m going to create a Custom Radio Button using HTML & CSS only. In my earlier blog, I have shared Custom Check Design, and it’s time to customize the radio button in the animated design.

In simple language, the radio buttons are the property of the input element of the HTML generally uses to make something clickable for once time. A checkbox is another property of the input tag which are uses to check and uncheck, it can be clicked twice but the radio button is clickable for a single click.

As you can see from the given image on the webpage, this is the real programming [Custom Radio Button ] which we are going to build today. You can see there is one title on the top of this image and three boxes with the subject of programming courses. We can see three circles like a radio button on the left side of all boxes. The first box is active that’s why its background color is different than other boxes and its right side radio button also looks in “ON ” condition and it has also a border. I have programmed all boxes like the first button. When we clicked other boxes then we could see the real programming.

If you are feeling confused by this program [Custom Radio Button], you can watch the full video tutorial that I have given below. After watching the given tutorial video of this programming [Radio Button Design], all your confusion will far away and you will get all ideas and concepts of this program.

Full Video Tutorial of Custom Radio Button using HTML & CSS

As you have seen in the video of this programming [Animated Radio Button], At first there were all boxes are not active. When I have clicked on the all boxes their border and dib background appears and the left side radio button also acts as a button. As you have seen, all the boxes are not actives at the same time.

I’m saying that when I clicked on the first button its active right but when I clicked on the second box the first box got “OFF” and the second box got “Active”. That’s why I have used a radio button to make this function.

If you have basic knowledge about HTML & CSS you can easily make this program [Radio Button Customize Design]. Those friends who are feeling difficulties to built this program [Radio Button CSS], don’t worry I have provided all source code file of this program below:

You Might Like This:

Custom Radio Button [Source Code Files]

To paste the given code of this program [Radio Button CSS Design] first of all, you need to create two files one is HTML file and another is a CSS file, after creating these two files you can easily copy-paste the given code in your document. You can also download all source code files of this programming [Animated Radio Button ] from the given “Download Button” directly.

<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Custom Radio Button | CodingLab </title>
    <link rel="stylesheet" href="style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
 <div class="card">
    <div class="title">Choose Your Course</div>
  <div class="content">
    <input type="radio" name="rd" id="one">
    <input type="radio" name="rd" id="two">
    <input type="radio" name="rd" id="three">

    <label for="one" class="box first">
      <div class="plan">
      <span class="circle"></span>
      <span class="yearly">HTML & CSS</span>
    </div>
        <span class="price">100$/year</span>
    </label>
    <label for="two" class="box second">
      <div class="plan">
      <span class="circle"></span>
      <span class="yearly">JavaScript</span>
    </div>
        <span class="price">120$/year</span>
    </label>
    <label for="three" class="box third">
      <div class="plan">
      <span class="circle"></span>
        <span class="yearly">PHP & MySQL</span>
      </div>
        <span class="price">150$/year</span>
    </label>
  </div>
 </div>
</body>
</html>

@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;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #68Eacc 0%, #497BE8 100%);
}
::selection{
  background: #d5bbf7;
}
.card{
  max-width: 350px;
  width: 100%;
  margin: 170px auto;
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
.card .title{
  font-size: 22px;
  font-weight: 500;
}
.card .content{
  margin-top: 20px;
}
.card  label.box{
  background: #ddd;
  margin-top: 12px;
  padding: 10px 12px;
  display: flex;
  border-radius: 5px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
}
#one:checked ~ label.first,
#two:checked ~ label.second,
#three:checked ~ label.third{
  border-color: #8E49E8;
  background: #d5bbf7;
}
.card  label.box:hover{
  background: #d5bbf7;
}
.card  label.box .circle{
  height: 22px;
  width: 22px;
  background: #ccc;
  border: 5px solid transparent;
  display: inline-block;
  margin-right: 15px;
  border-radius: 50%;
  transition: all 0.25s ease;
  box-shadow: inset -4px -4px 10px rgba(0, 0, 0, 0.2);
}
#one:checked ~ label.first .circle,
#two:checked ~ label.second .circle,
#three:checked ~ label.third .circle{
  border-color: #8E49E8;
  background: #fff;

}
.card  label.box .plan{
  display: flex;
  width: 100%;
  align-items: center;
}
.card input[type="radio"]{
  display: none;
}

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

]]> https://www.codingnepalweb.com/custom-radio-button-using-html-css/feed/ 0 Animated Share Button using only HTML & CSS https://www.codingnepalweb.com/animated-share-button-using-only-html-css/ https://www.codingnepalweb.com/animated-share-button-using-only-html-css/#respond Tue, 08 Dec 2020 21:09:15 +0000 https://www.codingnepalweb.com/?p=4250 Animated Share Button using only HTML & CSS

Hello readers, welcome to my other blog, today in this blog I’m going to create an Animated Share Button with help of HTML & CSS only. In a previous blog, I have shared How to Create a Website in HTML & CSS and I’m going to create an animated share button.

Simply we can understand that share button means a button on the screen which help user to send images, videos, music to the friends through the social media. There may be any social media like Facebook, Twitter, Instagram, YouTube, and others. Nowadays share buttons are used the maximum website and mobile app to make user’s sharing convenient.

As you can see on the given image of the share button with social media icons on the webpage. Actually, in the first in this program[Animated Share Button], there is only one button on the screen, when that button is clicked upper tooltip appears with these four social media icons with smooth sliding animation from top to button which really awesome. When this social media button hovered three colors are changed into the original color and these icons move a little upside.

If you are feeling difficulties understanding that what I’m saying, you can watch a full video tutorial of this program[Share Button Animation with Social Media Icons], which is given below.

Full Video of Animated Share Button using only HTML & CSS 

As you have seen in the video of this program. At first, three is a button with text share, and when that button is clicked one tooltip appears smoothly down to the close of that share button with some social media icons. When we hover these four social media icons there color was changed into original color.

And have you guys notice that the share button with text share was changed into cancel. When we clicked on the cancel button that social media icon tooltip id disappeared and the cancel button changed into share. To control that tooltip of social media icons I have used an HTML input checkbox and to do checked or unchecked the input I have used the label tag of the HTML

Friend if you know basic HTML and CSS then you can easily make this program[Animated Share Button], or if you have knowledge of JavaScript you can add more functions to this program as you like. Those my friend who are feeling difficulty to create this program, don’t worry I have provided all source codes given below and this is free, you can use this program as your purpose.

You Might Like This:

Animated Share button [Source Codes]

To paste the given codes of this program [ Animated Share Button Design], first of all, you need to create two files one is an HTML file and another is a CSS file. After creating these two files you can easily copy-paste the given codes in your HTML & CSS files. You can also download all source code files directly from the given “Download Button”.

<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Animated Share Button | CodingLab </title>
    <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
   </head>
<body>
<div class="mainbox">
  <input type="checkbox" id="check">
  <label for="check">Share</label>
  <div class="media-icons">
    <a href="#"><i class="fab fa-facebook"></i></a>
    <a href="#"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-instagram"></i></a>
    <a href="#"><i class="fab fa-youtube"></i></a>
  </div>
</div>
</body>
</html>

@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{
  background: #0984e3
}
.mainbox{
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
}
label{
  position: relative;
  background: #fff;
  height: 50px;
  width: 150px;
  border-radius: 35px;
  line-height: 50px;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  color: #0984e3;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}
label:hover{
letter-spacing: 1px;
}
label::before{
  content: 'Cancel';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #fff;
  border-radius: 35px;
  opacity: 0;
}
#check{
  display: none;
}
#check:checked ~ label::before{
  opacity: 1;
}
.media-icons{
  position: absolute;
  left: 50%;
  top: -120px;
  transform: translateX(-50%);
  background: #fff;
  width: 140%;
  height: 110%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 35px;
  padding: 4px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}
#check:checked ~ .media-icons{
  opacity: 1;
  pointer-events: auto;
  top: -84px;
}
.media-icons::before{
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  left: 50%;
  background: #fff;
  bottom: -9px;
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
}
.media-icons a{
  font-size: 22px;
  color: #0984e3;
  transition: all 0.3s ease;
}
.media-icons a:hover{
  transform: translateY(-2px);
}
.media-icons a:nth-child(1):hover{
  color: #426782;
}
.media-icons a:nth-child(2):hover{
  color: #1da1f2;
}
.media-icons a:nth-child(3):hover{
  color: #e1306c;
}
.media-icons a:nth-child(4):hover{
  color: #ff0000;
}

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

]]> https://www.codingnepalweb.com/animated-share-button-using-only-html-css/feed/ 0 Custom Radio Buttons using only HTML & CSS https://www.codingnepalweb.com/custom-radio-buttons-html-css/ https://www.codingnepalweb.com/custom-radio-buttons-html-css/#respond Wed, 30 Sep 2020 11:10:00 +0000 https://codingnepalweb.com/2020/09/30/custom-radio-buttons-using-only-html-css/ Custom Radio Buttons using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create the Custom Radio Buttons using only HTML & CSS. Earlier I’ve shared a blog on how to create the Custom Checkbox or Toggle On/Off Switch using only HTML & CSS and now it’s time to create a radio button.

A radio button or option button is one type of selection indicator or button that allows the user to choose only one option in a form list. In the radio button, if an option is selected, the circle is filled to inform the user, that option is selected.

In this program [Custom Radio Buttons], there are two options on the webpage labeled as Student and Teacher. The student option is selected by default and when you select the second option, the background color of this option will be changed and a circle is filled with animation as you can see in the image. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Custom Radio Buttons].

Video Tutorial of Custom Radio Buttons or Option Buttons

In the video, you’ve seen the custom radio or option buttons. As you know, this is a pure CSS program that means only HTML & CSS are used to create these buttons. To make these buttons, I used HTML <input type=”radio”> and <label> tags. You can also use the radio tag only to create a custom radio button but I used a label tag to control the radio button on text or label click.

If you want to control the <input type=”radio”> with <label> then you need to pass the id name of radio tag inside for attribute of the label tag like this <input type=”radio” name=”select” id=”option-1″> and <label for=”option-1″></label>. You’re thinking about why I used name attribute in radio tag, if you want, the user can select only one option in a form then this name attribute value must be the same as all other radio tags.

You might like this:

Custom Radio Buttons or Option Buttons [Source Codes]

To create this program (Custom Radio Buttons). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Custom Radio Buttons | CodingLab</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <input type="radio" name="select" id="option-1" checked>
      <input type="radio" name="select" id="option-2">
      <label for="option-1" class="option option-1">
        <div class="dot"></div>
        <span>Student</span>
      </label>
      <label for="option-2" class="option option-2">
        <div class="dot"></div>
        <span>Teacher</span>
      </label>
    </div>

  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #0069d9;
}
.wrapper{
  display: inline-flex;
  background: #fff;
  height: 100px;
  width: 400px;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 20px 15px;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
}
.wrapper .option{
  background: #fff;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 10px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.wrapper .option .dot{
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}
.wrapper .option .dot::before{
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #0069d9;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.3s ease;
}
input[type="radio"]{
  display: none;
}
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2{
  border-color: #0069d9;
  background: #0069d9;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot{
  background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before{
  opacity: 1;
  transform: scale(1);
}
.wrapper .option span{
  font-size: 20px;
  color: #808080;
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span{
  color: #fff;
}

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

]]> https://www.codingnepalweb.com/custom-radio-buttons-html-css/feed/ 0