CSS Button – CodingNepal

Animated Share Button using only HTML & CSS

CodingNepal — Tue, 08 Dec 2020 21:09:15 +0000

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

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

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

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

Full Video of Animated Share Button using only HTML & CSS

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

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

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

Animated Share button [Source Codes]

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




  
    
     Animated Share Button | CodingLab 
    
        
   


  
  Share

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  background: #0984e3
}
.mainbox{
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
}
label{
  position: relative;
  background: #fff;
  height: 50px;
  width: 150px;
  border-radius: 35px;
  line-height: 50px;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
  display: block;
  color: #0984e3;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}
label:hover{
letter-spacing: 1px;
}
label::before{
  content: 'Cancel';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: #fff;
  border-radius: 35px;
  opacity: 0;
}
#check{
  display: none;
}
#check:checked ~ label::before{
  opacity: 1;
}
.media-icons{
  position: absolute;
  left: 50%;
  top: -120px;
  transform: translateX(-50%);
  background: #fff;
  width: 140%;
  height: 110%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 35px;
  padding: 4px;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}
#check:checked ~ .media-icons{
  opacity: 1;
  pointer-events: auto;
  top: -84px;
}
.media-icons::before{
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  left: 50%;
  background: #fff;
  bottom: -9px;
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
}
.media-icons a{
  font-size: 22px;
  color: #0984e3;
  transition: all 0.3s ease;
}
.media-icons a:hover{
  transform: translateY(-2px);
}
.media-icons a:nth-child(1):hover{
  color: #426782;
}
.media-icons a:nth-child(2):hover{
  color: #1da1f2;
}
.media-icons a:nth-child(3):hover{
  color: #e1306c;
}
.media-icons a:nth-child(4):hover{
  color: #ff0000;
}

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

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

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.

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.

Buttons Shining Hover Effect using HTML & CSS

CodingNepal — Thu, 07 May 2020 08:51:00 +0000

Hello readers, Today in this blog you’ll learn how to create Buttons Shining Hover Effect using HTML & CSS. Previously I have shared an Animated Glowing Inputs Login Form in HTML & CSS, now it’s time to create Buttons with Cool Shining Hover Effect using only HTML CSS.

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

As you can see in the image, there are two CSS Buttons. These buttons are really attractive. Basically, at first, these buttons are in the initial stage where there is no shining effect. But when you hover on a specific button, A button background color filled with their border color and a cool shining hover effect sliding from the left side of a button to the right side.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Buttons Shining Hover Effect).

Video Tutorial of Shining Hover Effect on CSS Buttons

I believe you like this button and its shining hover effect. You can easily use this button in your project, sites, and anywhere you want. And you can take this button to the next level with your creativity.

If you like this program (Buttons Shining Hover Effect) and want to get codes of this. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

CSS Buttons with Shining Hover Effect [Source Codes]

To create this program (Buttons Shining Hover 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.




  
    
    Button Shining Hover Effect | CodingNepal

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: #0d0d0d;
}
button{
  position: relative;
  height: 65px;
  width: 210px;
  margin: 0 40px;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 1px;
  border-radius: 5px;
  text-transform: uppercase;
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
  background: #0d0d0d;
  overflow: hidden;
  transition: 0.6s;
}
button:first-child{
  color: #206592;
  border-color: #206592;
}
button:last-child{
  color: #ce5c0c;
  border-color: #ce5c0c;
}
button:before, button:after{
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  height: 100%;
  filter: blur(30px);
  opacity: 0.4;
  transition: 0.6s;
}
button:before{
  width: 60px;
  background: rgba(255,255,255,0.6);
  transform: translateX(-130px) skewX(-45deg);
}
button:after{
  width: 30px;
  background: rgba(255,255,255,0.6);
  transform: translateX(-130px) skewX(-45deg);
}
button:hover:before,
button:hover:after{
  opacity: 0.6;
  transform: translateX(320px) skewX(-45deg);
}
button:hover{
  color: #f2f2f2;
}
button:hover:first-child{
  background: #206592;
}
button:hover:last-child{
  background: #ce5c0c;
}

That’s all, now you’ve successfully created a Button Shining Hover Effect 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.

CSS Button – CodingNepal

Animated Share Button using only HTML & CSS

Full Video of Animated Share Button using only HTML & CSS

You Might Like This:

Animated Share button [Source Codes]

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]

Buttons Shining Hover Effect using HTML & CSS

Video Tutorial of Shining Hover Effect on CSS Buttons

CSS Buttons with Shining Hover Effect [Source Codes]