CSS Buttons – 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:12:09 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 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 Custom Checkbox Design using only HTML & CSS | Toggle Switch On/Off https://www.codingnepalweb.com/custom-checkbox-design-html-css/ https://www.codingnepalweb.com/custom-checkbox-design-html-css/#respond Sat, 29 Aug 2020 07:46:00 +0000 https://codingnepalweb.com/2020/08/29/custom-checkbox-design-using-only-html-css-toggle-switch-on-off/ Custom Checkbox Design using only HTML & CSS Toggle Switch OnOff

Hello readers, Today in this blog you’ll learn how to create Custom Checkbox or Toggle Switch using only HTML & CSS. Earlier I have shared a blog on how to create Password Show or Hide Toggle using JavaScript and now it’s time to create an On/Off Toggle Switch.

A checkbox, selection box, or tick box is a small interactive box that can be toggled by the user to show an affirmative or negative choice. And a toggle button lets the user change a setting between two states.

In this program (Custom Checkbox or Toggle Switch), on the webpage, there is a toggle switch and a text labeled as “Disabled”. When you click on that toggle switch or checkbox, the toggle switch or checkbox is on, enabled, or checked and the text is also changed into “Enabled”. When the toggle switch is on, the background color of the toggle and the color of the text is also changed.

You can also on/off the switch of the toggle by clicking on the label text and this is a pure CSS program, which means I used only HTML & CSS to create this toggle switch. You can watch a full video tutorial on this program (Custom Checkbox or Toggle Switch).

Video Tutorial of Custom Checkbox Design

In the video, you have seen the custom checkbox or toggle switch on/off button and I hope you have understood the basic codes behind creating this program. As I have already told you this is a pure CSS program and to make the text as a toggle button I used <label for=”click”> and <input type=”checkbox” id=”click”> now with this line of code, we can control the checkbox using the label.

But remember that, when you’re making labels as a toggle don’t forget to put the id name of the input tag inside the the attribute of label tag. If you like this program (Custom Checkbox Design) 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 Toggle switch in your HTML pages and websites.

You might like this:

Custom Checkbox Design or Toggle Switch [Source Codes]

To create this program (Checkbox Design or Toggle Switch). 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 Toggle Button | CodingLab</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="checkbox">
      <input type="checkbox" id="click">
      <label for="click" class="text"></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: #664AFF;
}
.checkbox{
  height: 80px;
  width: 270px;
  padding: 20px;
  display: flex;
  background: #fff;
  align-items: center;
  border-radius: 5px;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
  justify-content: space-between;
}
.checkbox input{
  outline: none;
  height: 40px;
  width: 90px;
  border-radius: 50px;
  -webkit-appearance: none;
  position: relative;
  background: #e6e6e6;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.checkbox input:checked{
  background: #664AFF;
}
.checkbox input:before{
  position: absolute;
  content: "";
  left: 0;
  height: 100%;
  width: 40px;
  background: linear-gradient(#fff,#f2f2f2,#e6e6e6,#d9d9d9);
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  border-radius: 50px;
  transform: scale(0.85);
  transition: left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input:checked:before{
  left: 50px;
}
.checkbox .text:before{
  content: "Disabled";
  font-size: 25px;
  font-weight: 500;
  color: #bfbfbf;
}
input:checked ~ .text:before{
  color: #664AFF;
  font-size: 27px;
  content: "Enabled";
}

That’s all, now you’ve successfully created a Custom Checkbox Design using only 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/custom-checkbox-design-html-css/feed/ 0 Button Ripple Effect in HTML CSS & JavaScript https://www.codingnepalweb.com/button-ripple-effect-in-javascript/ https://www.codingnepalweb.com/button-ripple-effect-in-javascript/#comments Sun, 05 Jul 2020 09:40:00 +0000 https://codingnepalweb.com/2020/07/05/button-ripple-effect-in-html-css-javascript/ Button Ripple Effect in HTML CSS & JavaScript

Hello readers, Today in this blog you’ll learn how to create a Button Ripple Effect using HTML CSS & JavaScript. Earlier I have shared many blogs on Gradient Glowing Effect on Button, 3D Flip Button, and Colorful Glowing Effect on Button. But now I’m going to create a Ripple Effect on the Button.

The Ripple effect provides an immediate visual confirmation at the point of contact when the users interact with UI elements. And a button is any graphic or text box that lets your visitors interact with your website. Interaction is commonly an action that you want your visitors to take.

In this program (Button Ripple Effect), at first, on the webpage, there are two gradient buttons with different background-color. Generally, gradient means a mix of two or more colors. And when you click on the particular button there is shown a ripple effect and it expands smoothly as you can see in the image. This ripple effect is dynamic that means this ripple starts expanding from the point where you clicked.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Button Ripple Effect in HTML & CSS).

Video Tutorial of Button Ripple Effect in JavaScript

 
As you have seen the ripple effect in the video. And I hope you have understood the basic codes behind creating this ripple effect. You also knew this ripple effect is a dynamic effect that means the position of this effect is not fixed. This type of effect is in trend nowadays. Many websites are using this ripple effect on their UI elements like buttons, links, and many more.

To make this ripple effect dynamic, JavaScript plays a significant role. Without JavaScript, we can’t make this effect dynamic. If you’re a beginner and you know HTML & CSS only, you can also create a simple ripple effect, but that effect won’t be dynamic.

You might like this:

Button Ripple Effect in JavaScript [Source Codes]

To create this program (Button Ripple Effect). 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 Ripple Effect | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="wrapper">
         <div class="text">
            Button Ripple Effect
         </div>
         <p>
            using HTML CSS & JavaScript
         </p>
         <div class="btns">
            <a href="#">Click me</a>
            <a href="#">Click me</a>
         </div>
      </div>
      <script>
         const buttons = document.querySelectorAll("a");
         buttons.forEach((button) => {
           button.onclick = function(e){
             let x = e.clientX - e.target.offsetLeft;
             let y = e.clientY - e.target.offsetTop;
             let ripple = document.createElement("span");
             ripple.style.left = `${x}px`;
             ripple.style.top = `${y}px`;
             this.appendChild(ripple);
             setTimeout(function(){
               ripple.remove();
             }, 600); // 1second = 1000ms
           }
         });
         
      </script>
   </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;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
}
.wrapper{
  background: #fff;
  padding: 20px 30px;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
}
.wrapper .text{
  font-size: 35px;
  font-weight: 600;
}
.wrapper p{
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
}
.wrapper .btns{
  display: flex;
  margin: 30px 0 20px 0;
}
.btns a{
  position: relative;
  margin: 0 20px;
  height: 60px;
  width: 200px;
  display: block;
  line-height: 60px;
  border-radius: 30px;
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btns a:first-child{
  background: linear-gradient(-90deg, #f5ce62, #e85a19);
}
.btns a:last-child{
  background: linear-gradient(90deg, #0162c8, #55e7fc);
}
.btns a > span{
  position: absolute;
  background: #fff;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  animation: ripples 0.6s linear infinite;
}
@keyframes ripples {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0.5;
  }
  100% {
    width: 500px;
    height: 500px;
    opacity: 0;
  }
}

That’s all, now you’ve successfully created a Button Ripple Effect in HTML CSS & JavaScript. 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/button-ripple-effect-in-javascript/feed/ 13 Animated 3D Flip Buttons using HTML & CSS https://www.codingnepalweb.com/animated-3d-flip-buttons-html-css/ https://www.codingnepalweb.com/animated-3d-flip-buttons-html-css/#respond Fri, 29 May 2020 09:41:00 +0000 https://codingnepalweb.com/2020/05/29/animated-3d-flip-buttons-using-html-css/ Animated 3D Flip Buttons using HTML & CSS

Hello readers, Today in this blog you’ll learn how to create 3D Flip Buttons in HTML & CSS. Earlier I have shared Glowing Hover Effects on CSS Buttons using HTML & CSS. Now it’s time to create a 3D Hover Effect or Animation on Buttons using only HTML & CSS.

A button is a fundamental UI element that will heavily affect your interaction design of the webpage. Buttons have the power to force users to convert, to act. Buttons are a middleman between the users and the products.

Today in this blog, I’ll share with you this Animated 3D Flip Button. At first, these buttons are in the initial stage where there are no 3D effects or animations. But when you hover on the specific button, that button rotates vertically with 3D visualization.

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

Video Tutorial of 3D Flip Buttons in HTML & CSS

 
I hope you have understood the basic codes behind creating this 3D effect on Buttons. As you know I used only HTML & CSS to create this 3D effect. So you can call it this is a pure CSS program.

If you’re a beginner and you have basic knowledge of HTML & CSS then you can also create this type of 3D effect. After watching this video I believe that you liked this 3D Hover effect on CSS Buttons and I also believe that this short video helps a beginner to understand the basic concepts behind creating a 3D effect.

If you like these 3D Flip 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.

3D Hover Effect on CSS Buttons [Source Codes]

To create this program (3D Flip 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>3D Flip Buttons</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <span><a href="#"></a></span>
    <span><a href="#"></a></span>

  </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=Montserrat:600&display=swap');
body{
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background:white;
}
span{
  position: relative;
  display: inline-flex;
  width: 180px;
  height: 55px;
  margin: 0 15px;
  perspective: 1000px;
}
span a{
  font-size: 19px;
  letter-spacing: 1px;
  transform-style: preserve-3d;
  transform: translateZ(-25px);
  transition: transform .25s;
  font-family: 'Montserrat', sans-serif;
}
span a:before,
span a:after{
  position: absolute;
  content: "BUTTON";
  height: 55px;
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid black;
  box-sizing: border-box;
}
span:nth-child(1) a:before{
  color: #fff;
  background: #000;
  transform: rotateY(0deg) translateZ(25px);
}
span:nth-child(1) a:after{
  color: #000;
  transform: rotateX(90deg) translateZ(25px);
}
span:nth-child(2) a:before{
  color: #fff;
  background: black;
  transform: rotateX(-90deg) translateZ(25px);
}
span:nth-child(2) a:after{
  color: #000;
  transform: rotateY(0deg) translateZ(25px);
}
span:nth-child(1) a:hover{
  transform: translateZ(-25px) rotateX(-90deg);
}
span:nth-child(2) a:hover{
  transform: translateZ(-25px) rotateX(90deg);
}

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

]]> https://www.codingnepalweb.com/animated-3d-flip-buttons-html-css/feed/ 0 Cool Glowing Effect on Buttons using HTML & CSS https://www.codingnepalweb.com/cool-glowing-effect-on-buttons-html-css/ https://www.codingnepalweb.com/cool-glowing-effect-on-buttons-html-css/#comments Mon, 11 May 2020 11:43:00 +0000 https://codingnepalweb.com/2020/05/11/cool-glowing-effect-on-buttons-using-html-css/ Cool Glowing Effect on Buttons using HTML and CSS

Hello readers, Today in this blog you’ll learn how to create Cool Glowing Effects on Buttons using only HTML & CSS. Previously I have shared how to create a Shining Hover Effect on Buttons using HTML CSS, now it’s time to create a Glowing Effects on CSS Buttons.

CSS buttons refer to styled HTML buttons that developers customize to match their website designs. You can manipulate the colors, text sizes, padding, and even change styling properties when buttons enter different states.

As you can see in the image, there are two buttons with a glowing effect. These buttons are based on only HTML & CSS. Simply, to create this glow effect I moved two or more colors smoothly with some blur effects.

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

Video Tutorial of Cool Glowing Effect on CSS Buttons

 
I believe you like this program (Cool Glowing Effect on Buttons) and its shining hover effect. If you like this Glow effect on the button and want to get codes of this program. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

If you are a beginner and have some basic knowledge about HTML & CSS then definitely you can also create these types of glowing effects on buttons. You can use these buttons on your websites, projects, and wherever you want.

Glowing Effect on Buttons in HTML & CSS [Source Codes]

To create this program (Cool Glowing Effect on 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>Glowing CSS Buttons | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="buttons">
      <button>Hover Me</button>
      <button>Hover Me</button>
    </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: #000;
  overflow: hidden;
}
button{
  position: relative;
  height: 60px;
  width: 200px;
  margin: 0 35px;
  border-radius: 50px;
  border: none;
  outline: none;
  background: #111;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.5s;
}
button:first-child:hover{
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
}
button:last-child:hover{
  background: linear-gradient(90deg, #fa7199, #f5ce62, #e43603, #fa7199);
  background-size: 400%;
}
button:first-child:before,
button:last-child:before{
  content: '';
  position: absolute;
  background: inherit;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 50px;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.5s;
}
button:first-child:hover:before,
button:last-child:hover:before{
  opacity: 1;
  z-index: -1;
}
button:hover{
  z-index: 1;
  animation: glow 8s linear infinite;
}
@keyframes glow {
  0%{
    background-position: 0%;
  }
  100%{
    background-position: 400%;
  }
}

That’s all, now you’ve successfully created a Cool Glowing Effect on 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.

]]> https://www.codingnepalweb.com/cool-glowing-effect-on-buttons-html-css/feed/ 13 Copy Text to Clipboard Button in HTML CSS & Javascript https://www.codingnepalweb.com/copy-text-to-clipboard-button-javascript/ https://www.codingnepalweb.com/copy-text-to-clipboard-button-javascript/#comments Mon, 04 May 2020 13:40:00 +0000 https://codingnepalweb.com/2020/05/04/copy-text-to-clipboard-button-in-html-css-javascript/ Copy Text to Clipboard Button in HTML CSS & Javascript
Hello readers, Today in this blog you’ll learn how to create a Copy Text to Clipboard Button using HTML CSS & JavaScript. Previously I have shared a Working Calculator using HTML CSS & jQuery, now it’s time to create copying to the clipboard Button using JavaScript.

What does ‘Copied to Clipboard’ mean? The clipboard is where content goes on your device and computer when you Copy something to Paste later. In Keeper, you can copy record information to the clipboard by tapping the clipboard icon next to the field that you wish to copy.

Copy Text to Clipboard Button in HTML CSS & Javascript

As you can see in the image, there are two textarea boxes and one copy button. When you click on that copy in the clipboard button the upper texts will be selected and copied.

When you click on that button, a small tooltip will appear with sliding from the left side. That tooltip is used to inform a user the text has been successfully copied. If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Copy Text to Clipboard Button).

Video Tutorial of Copy to Clipboard Button in JavaScript

 
I hope you understood the basic codes behind the creating of this program. As you have seen in the video, to create this program I used HTML CSS & Javascript. Using only HTML & CSS to create this program is impossible. I used HTML & CSS for styling elements like textarea, buttons, and tooltips. And, I used Javascript Document.execCommand(‘copy’) to copy the contents.

If you like this program (Copy Text to Clipboard Button) 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.

Copy Text to Clipboard in HTML CSS & Javascript [Source Codes]

To create this program (Copy Text to Clipboard Button). 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 into your HTML file. Remember, you’ve to create a file with a .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Copying Texts in Clipboard | CodingNepal</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="container">
         <textarea id="copyText" cols="60" rows="5">Welcome to CodingNepal. CodingNepal is a channel where you can learn HTML, CSS, and Javascript tutorials along with creative CSS Animations and Effects. We provide free resources to inspire design-focused frontend developers. Improve your coding skills with our free programs and video tutorials.</textarea>
         <br />
         <div class="btn">
            <button>copy in clipboard</button><span class="tooltip">copied</span>
         </div>
         <textarea cols="60" id="pasteText" placeholder="Paste your copied content here.." rows="5"></textarea>
      </div>
      <script>
         const copyText = document.querySelector("#copyText");
         const pasteText = document.querySelector("#pasteText");
         const button = document.querySelector("button");
         const tooltip = document.querySelector(".tooltip");
         button.addEventListener('click', function(){
           copyText.select();
           pasteText.value = "";
           tooltip.classList.add("show");
           setTimeout(function(){
             tooltip.classList.remove("show");
           },700);
           if(document.execCommand("copy")){
             pasteText.focus();
           }else{
             alert("Something went wrong!");
           }
         });
      </script>
   </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 a .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;
}
::selection {
  color: #fff;
  background: #18b495;
}
textarea{
  padding: 10px;
  font-size: 17px;
  resize: none;
  text-align: justify;
  color: #202020;
}
textarea:focus{
  outline-color: #16a085;
  border-color: #16a085;
}
.btn{
  margin: 5px 0 40px 0;
}
.btn button{
  padding: 9px 15px;
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 500;
  background: linear-gradient(#18b495,#16a085);
  border: none;
  color: #f2f2f2;
  cursor: pointer;
  letter-spacing: 1px;
  border-radius: 3px;
  outline: none;
}
.btn .tooltip{
  position: relative;
  margin-left: -10px;
  font-size: 17px;
  font-weight: 500;
  color: #f2f2f2;
  z-index: -1;
  background: linear-gradient(#18b495,#16a085);
  padding: 5px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, margin-left 0.4s;
}
.btn .tooltip.show{
  margin-left: 10px;
  opacity: 1;
  pointer-events: auto;
}
.tooltip:before{
  content: '';
  position: absolute;
  height: 15px;
  width: 15px;
  background: linear-gradient(#18b495,#16a085);
  top: 50%;
  left: -5px;
  z-index: -1;
  transform: translateY(-50%) rotate(45deg);
}

That’s all, now you’ve successfully created a Copy Text to Clipboard Button in HTML CSS & Javascript. If your code does not work or you’ve faced any error/problem, please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/copy-text-to-clipboard-button-javascript/feed/ 14