Animated Button – 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 04:43:51 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 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 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 Button with Border Hover Animation using HTML & CSS https://www.codingnepalweb.com/animated-button-with-border-hover-animation/ https://www.codingnepalweb.com/animated-button-with-border-hover-animation/#comments Sat, 22 Aug 2020 06:12:00 +0000 https://codingnepalweb.com/2020/08/22/animated-button-with-border-hover-animation-using-html-css/ Animated Button with Border Hover Animation using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create an Animated Button with Border Hover Animation using only HTML & CSS. Earlier I have shared a blog on how to create a Colorful Gradient Glowing Effect on Buttons using CSS and now I’m going to create a Border Animation on Button.

Button refers to any graphical control element that gives the user an easy way to trigger an event, like searching for a question in a search engine or to associated with dialog boxes, like confirming an action. If the action is to create, edit, delete, or anything else to any piece of information, there is also use a button.

In this program (Button with Border Hover Animation), at first, on the webpage, there is a button with a gradient border and when you hover on it then the border of the button starts to animate, moving, or glowing. When you exit or out your mouse pointer from the button, the border stops animating. This type of border animation on the button you may have seen on the codepen.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Border Hover Animation).

Video Tutorial of Button with Border Hover Animation

 
In the video, you have seen the button hover animation and I hope you have understood the basic codes behind creating this animation. This is a pure CSS program that means I used only HTML & CSS to create this button and their border animation. So if you’re a beginner then you can also create this type of animation with a few lines of CSS codes.

If you like this program (Border Hover Animation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this button on your HTML pages, websites, and projects.

You might like this:

Border Hover Animation on Buttons [Source Codes]

To create this program (Border Hover Animation). 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>Button Border Animation | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="btn">
      <a href="#"><span>Hover Me</span></a>
    </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: 100vh;
  place-items: center;
  background: #000;
}
.btn a{
  position: relative;
  color: #f5f5f5;
  height: 70px;
  width: 220px;
  display: block;
  text-align: center;
  border-radius: 10px;
  text-decoration: none;
  background-image: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
}
.btn a:hover{
  animation: rotate 0.4s linear infinite;
}
@keyframes rotate {
  100%{
    filter: hue-rotate(-360deg)
  }
}
.btn a span{
  height: 88%;
  width: 96%;
  background: #111;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 6px;
  line-height: 62px;
  font-size: 25px;
  transform: translate(-50%, -50%);
}

That’s all, now you’ve successfully created an Animated Button with Border Hover Animation using HTML & CSS. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/animated-button-with-border-hover-animation/feed/ 15