Button Hover Animation – CodingNepal

Draggable Circular Navigation Menu in HTML CSS & JavaScript

CodingNepal — Tue, 27 Dec 2022 21:11:19 +0000

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.

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.





  
  
   Draggable Navigation Menu | Codinglab

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

Star Rating in HTML CSS & JavaScript

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

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

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

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

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

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

Video Tutorial | Star Rating in HTML CSS & JavaScript

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

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

Star Rating in HTML CSS & JavaScript [Source Code]

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

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

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

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




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

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

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

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

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

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

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

View Live Demo

Social Media Navigation Button in HTML CSS & JavaScript

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

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

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

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

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

Social Media Navigation Button in HTML CSS & JavaScript

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

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

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

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

Social Media Navigation Button [Source Code]

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

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

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

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

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]

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.



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

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.

Custom Radio Button using HTML & CSS

CodingNepal — Fri, 01 Jan 2021 21:09:27 +0000

Hello 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 Design

Animated Login Form In HTML & CSS

Custom Alert Box or Popup Box Design

Animated Profile Card using HTML CSS

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.




  
    
     Custom Radio Button | CodingLab 
    
     
   

 
    Choose Your Course
  
    
    
    

    
      
      
      HTML & CSS
    
        100$/year
    
    
      
      
      JavaScript
    
        120$/year
    
    
      
      
        PHP & MySQL
      
        150$/year

@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.

Custom Radio Buttons using only HTML & CSS

CodingNepal — Wed, 30 Sep 2020 11:10:00 +0000

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 and 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 with then you need to pass the id name of radio tag inside for attribute of the label tag like this and . 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.

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.




  
    
    Custom Radio Buttons | CodingLab
    
  
  
    
      
      
      
        
        Student
      
      
        
        Teacher

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

Glowing Effects on CSS Buttons using HTML & CSS

CodingNepal — Thu, 14 May 2020 07:52:00 +0000

Hello readers, Today in this blog you’ll learn how to create CSS Buttons with a Glowing Effect on Hover. Earlier I have shared a Glowing Effect in Social Media Buttons, Now it’s time to create these Glowing Effects in Buttons.

A button is a fundamental UI element that will heavily affect your interaction design of the website between the user. Buttons have the power to compel users to convert, to act.

As you can see in the image, there are two buttons with cool background glowing effect. At first, these buttons are in the initial stage where there are no glowing effects on the background. But when you hover on the specific button then the glowing effect starts. This effect fully based on CSS only.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Glowing Effects on CSS Buttons).

Video Tutorial of Glowing Effect on CSS Buttons

If you like this program (Glowing Effects on CSS Buttons) 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 these Glowing buttons on your projects.

If you have basic knowledge of HTML & CSS, you can also create these types of effects on buttons, social media icons, cards, etc. I believe this short video helps a beginner to understand behind creating a glow effect.

Glowing Effect on Button using HTML & CSS [Source Codes]

To create this program (Glowing Effects on CSS 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.




  
    
    Glowing Button on Hover

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=Raleway:300");
*{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  height: 100vh;
  background: black;
  align-items: center;
  justify-content: center;
}
button{
  position: relative;
  height: 60px;
  width: 200px;
  border: none;
  outline: none;
  color: white;
  background: #111;
  cursor: pointer;
  border-radius: 5px;
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
}
button:before{
  position: absolute;
  content: '';
  top: -2px;
  left: -2px;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
  border-radius: 5px;
  z-index: -1;
  opacity: 0;
  filter: blur(5px);
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  background-size: 400%;
  transition: opacity .3s ease-in-out;
  animation: animate 20s linear infinite;
}
button:hover:before{
  opacity: 1;
}
button:hover:active{
  background: none;
}
button:hover:active:before{
  filter: blur(2px);
}
@keyframes animate {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

That’s all, now you’ve successfully created Glowing Effects on CSS Buttons using HTML & CSS. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Button Hover Animation – CodingNepal

Draggable Circular Navigation Menu in HTML CSS & JavaScript

Draggable Circular Navigation Menu in HTML CSS & JavaScript

You Might Like This:

Circular Navigation Menu [Source Code]

Star Rating in HTML CSS & JavaScript

Video Tutorial | Star Rating in HTML CSS & JavaScript

You May Like This:

Star Rating in HTML CSS & JavaScript [Source Code]

Social Media Navigation Button in HTML CSS & JavaScript

Social Media Navigation Button in HTML CSS & JavaScript

You Might Like This:

Social Media Navigation Button [Source Code]

Button Animation in HTML CSS & JavaScript

Button Animation in HTML CSS & JavaScript | Video Tutorial

You Might Like This:

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

Custom Radio Button using HTML & CSS

Full Video Tutorial of Custom Radio Button using HTML & CSS

You Might Like This:

Custom Radio Button [Source Code Files]

Custom Radio Buttons using only HTML & CSS

Video Tutorial of Custom Radio Buttons or Option Buttons

You might like this:

Custom Radio Buttons or Option Buttons [Source Codes]

Glowing Effects on CSS Buttons using HTML & CSS

Video Tutorial of Glowing Effect on CSS Buttons

Glowing Effect on Button using HTML & CSS [Source Codes]