Social Media Buttons – CodingNepal

Neumorphism Effect on Social Media Icons CSS

CodingNepal — Thu, 15 Oct 2020 21:08:48 +0000

Hello readers, today in this blog we are going to design a Neumorphism Effect on Social Media Icons by using only HTML & CSS. In the earlier blog, I have shared a program of How to Create an Animated Share Button and now I’m going to create a social media button with a neumorphism style.

In simple language, neumorphism means a UI design style mainly of white color and it looks very soft and plastic. This neumorphism design look vacuum and really catchy for the eyes. Neumorphism design can be used in any program like login form, share button, profile card, and others.

As you can see on the given image of this program [Neumorphism Effect on Social Media Icons], on the webpage. There are famous social media (Facebook, Twitter, Instagram, and youtube) with the neumorphism effect, as you can clearly look on these media button some icon looks like they are popped and some are looks like they have pressed. Literally, I have made an effect by using CSS box-shadow. All social media color is original, which are given by their creator. Let’s talk about this program. In the first, all of them are pop-up ed and when we hover them they got pressed in the neumorphism style.

If you are feeling difficulty to understand this program. Don’t worry my friend, I have provided a full video tutorial about this program [Neumorphism Effect on Social Media Icons]. Please watch this full video. I hope after watching this video, all your confusion will clear.

Video Tutorial Neumorphism Effect on Social Media Icons CSS

As you saw in the full video of Neumorphism Effect on Social Media Icons. All backgrounds designed in neumorphism style. When those icons hover, the button got pressed which looks really very awesome. I have made this program[Neumorphism Effect on Social Media Icons ] with the help of HTML & CSS only.

If you are familiar with HTML & CSS you can make this video easily and also if you have knowledge about JavaScript you can add more functionality as you like. Those my friends who are feeling difficult to create this program [ Neumorphism Effect on Social Media Icons], don’t worry I have provided all source codes of this program. This is free and all of you can use this program for your purposes.

Hover Effect o Social Media Icons [Source Codes]

To paste the given codes of this program [Neumorphism Effect on Social Media Icons] into your computer, first of all, you need to create two files, one is an HTML file and another is the CSS file. After creating these two files you can copy-paste the given codes of this program easily. If you want to download all source code files directly from the “Download Button”.





    
    
    Counter up Animation on Scroll | CodingNepal

@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;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #ecf0f3;
}
.icons a{
  background: #ecf0f3;
  position: relative;
  height: 60px;
  width: 60px;
  margin: 0 10px;
  display: inline-flex;
  text-decoration: none;
  border-radius: 50%;
  transition: all 0.3s;
  box-shadow: -3px -3px 7px #ffffff,
              3px 3px 5px #ceced1;
}
.icons a:hover:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  background: #ecf0f3;
  box-shadow: inset -3px -3px 7px #ffffff,
              inset 3px 3px 5px #ceced1;
}
.icons a i{
  position: relative;
  z-index: 3;
  text-align: center;
  width: 100%;
  height: 100%;
  font-size: 25px;
  line-height: 60px;
}
.icons a:hover i{
  transform: scale(0.9);
}
.icons a.fb i{
  color: #4267B2;
}
.icons a.twitter i{
  color: #1DA1F2;
}
.icons a.insta i{
  color: #E1306C;
}
.icons a.git i{
  color: #333;
}
.icons a.yt i{
  color: #ff0000;
}

3D Social Media Buttons using only HTML & CSS

CodingNepal — Tue, 25 Aug 2020 08:49:00 +0000

Hello readers, Today in this blog you’ll learn how to create 3D Social Media Buttons using only HTML & CSS. Previously I have shared a blog on how to create the Social Media Buttons with Tooltip on Hover and now I’m going to 3D Effect on Social Media Buttons.

The Social Media Links and Buttons let your website visitors and content viewers to easily share your content with their preferred social media connections and networks. Adding these buttons or links to your content allows you to expand the reach of your content to new audiences and make new visitors back to your website.

In this program (3D Social Media Buttons), on the webpage, there are four different social media networks buttons – Facebook, Twitter, Instagram, and YouTube with their icon or logo and when you click on a particular button, the button is clicked with 3D visualization which makes these buttons more attractive. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (3D Effect on Social Media Buttons).

Video Tutorial of 3D Social Media Buttons

In the video, you have seen the 3D Click Effect on Social Media Buttons and I hope you’ve understood the basic codes behind creating these buttons and their 3D effect too. This is a pure CSS program that means I used only HTML & CSS so if you’re a beginner then you can also create these types of buttons and effects.

You can add tag inside each button to redirect the user to your particular preferred social network site/account on button click. You can easily get the source codes of this program (3D Social Media Buttons). To get the source codes you just need to scroll down. You can use these Social Media Buttons in your HTML pages, websites, and projects.

3D Social Media Buttons [Source Codes]

To create this program (Social Media Buttons with Tooltip). 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.




   
      
      3D Social Media Buttons | 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;
}
.buttons{
  display: flex;
  width: 500px;
  height: 300px;
  align-items: center;
  justify-content: space-around;
}
.buttons .row{
  display: block;
 margin-left: 60px;
}
.buttons .row button{
  position: relative;
  display: block;
  height: 55px;
  width: 150px;
  margin: 40px 0;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 0 5px 5px 0;
  transition: all 0s ease-out;
}
.row button:active{
  top: 3px;
}
.row button.facebook,
.row button.facebook span{
  background: #3B5999;
  border-left: 1px solid #2E4476;
  box-shadow: 0px 5px 0px 0px #2E4476;
}
.row button.facebook:active{
  box-shadow: 0px 2px 0px 0px #2E4476;
}
.row button.twitter,
.row button.twitter span{
  background: #46C1F6;
  border-left: 1px solid #269BD0;
  box-shadow: 0px 5px 0px 0px #269BD0;
}
.row button.twitter:active{
  box-shadow: 0px 2px 0px 0px #269BD0;
}
.row button.instagram,
.row button.instagram span{
  background: #e1306c;
  border-left: 1px solid #c91d56;
  box-shadow: 0px 5px 0px 0px #c91d56;
}
.row button.instagram:active{
  box-shadow: 0px 2px 0px 0px #c91d56;
}
.row button.youtube,
.row button.youtube span{
  background: #DE463B;
  border-left: 1px solid #C02B21;
  box-shadow: 0px 5px 0px 0px #C02B21;
}
.row button.youtube:active{
  box-shadow: 0px 2px 0px 0px #C02B21;
}
.row button span{
  position: absolute;
  height: 55px;
  width: 60px;
  top: 0;
  left: -60px;
  line-height: 55px;
  font-size: 25px;
  display: block;
  font-weight: normal;
  border-radius: 5px 0 0 5px;
}
.row button:active span{
  top: -3px;
}
.row button.facebook span{
  border-right: 1px solid #2E4476;
}
.row button.twitter span{
  border-right: 1px solid #269BD0;
}
.row button.instagram span{
  border-right: 1px solid #c91d56;
}
.row button.youtube span{
  border-right: 1px solid #C02B21;
}
.row button.facebook:active span{
  box-shadow: 0px 5px 0px 0px #2E4476,
              6px 4px 2px rgba(0,0,0,0.3);
}
.row button.twitter:active span{
  box-shadow: 0px 5px 0px 0px #269BD0,
              6px 4px 2px rgba(0,0,0,0.3);
}
.row button.instagram:active span{
  box-shadow: 0px 5px 0px 0px #c91d56,
              6px 4px 2px rgba(0,0,0,0.3);
}
.row button.youtube:active span{
  box-shadow: 0px 5px 0px 0px #C02B21,
              6px 4px 2px rgba(0,0,0,0.3);
}

That’s all, now you’ve successfully created 3D Social Media Buttons 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.

Social Media Buttons with Tooltip on Hover using only HTML & CSS

CodingNepal — Tue, 25 Aug 2020 08:09:00 +0000

Hello readers, Today in this blog you’ll learn how to create the Social Media Buttons with Tooltip on Hover using only HTML & CSS. Earlier I have shared a blog on how to create Glowing Effect on Social Media Icons and now I’m going to create the Tooltip for Social Media Buttons or Icons.

The Social Media Buttons allow your website visitors and content viewers to easily share your content with their social media connections and networks. A tooltip is a short, informative message that appears when a user interacts with an element.

In this program (Social Media Buttons with Tooltip), at first, on the webpage, there are five social media buttons – Facebook, Twitter, Instagram, Github, and YouTube. When you hover on a particular button or icon then the tooltip appears with sliding animation and the background color of a button also changes with the default icon color. Inside tooltip, there is the name of a particular hovered social media icon as you have seen in the image.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Social Media Buttons with Tooltip).

Video Tutorial of Social Media Buttons with Tooltip

In the video, you have seen the Social Media Button with Tooltip and I hope you have understood the basic codes behind creating these icons or buttons and their tooltip too. This is a pure CSS program so if you’re a beginner, you can also easily this type of tooltip.

I would like to inform you that when you click on a particular social media button, it won’t redirect you to any site. If you want to redirect on a particular site then you have to add tag inside each

tag.

If you like this program (Social Media Button with Tooltip) 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 Social Media Buttons in your HTML pages, websites, and projects.

Social Media Buttons with Tooltip [Source Codes]

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.




   
      
      Social Media Buttons with Tooltip | CodingNepal
      
      
   
   
      
         
            
               Facebook
            
            
         
         
            
               Twitter
            
            
         
         
            
               Instagram
            
            
         
         
            
               Github
            
            
         
         
            
               YouTube

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%;
  width: 100%;
  place-items: center;
  background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
}
.wrapper{
  display: inline-flex;
}
.wrapper .icon{
  margin: 0 20px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 2;
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span{
  display: block;
  height: 60px;
  width: 60px;
  background: #fff;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon span i{
  line-height: 60px;
  font-size: 25px;
}
.wrapper .icon .tooltip{
  position: absolute;
  top: 0;
  z-index: 1;
  background: #fff;
  color: #fff;
  padding: 10px 18px;
  font-size: 20px;
  font-weight: 500;
  border-radius: 25px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover .tooltip{
  top: -70px;
  opacity: 1;
  pointer-events: auto;
}
.icon .tooltip:before{
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  background: #fff;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.wrapper .icon:hover span{
  color: #fff;
}
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip{
  text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
}
.wrapper .facebook:hover span,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip:before{
  background: #3B5999;
}
.wrapper .twitter:hover span,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip:before{
  background: #46C1F6;
}
.wrapper .instagram:hover span,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip:before{
  background: #e1306c;
}
.wrapper .github:hover span,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip:before{
  background: #333;
}
.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip:before{
  background: #DE463B;
}

That’s all, now you’ve successfully created Social Media Buttons with Tooltip on Hover 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.

Awesome Social Media Buttons with Hover Animation | HTML & CSS

CodingNepal — Thu, 30 Jul 2020 07:06:00 +0000

Hello readers, Today in this blog you’ll learn how to create Awesome Social Media Buttons with Hover Animation using only HTML & CSS. Earlier I have shared a blog on how to create a Glowing Effect on Social Media Buttons. And now I’m going to create an Awesome Hover Animation on Socia Media Icons.

The Social Icons Widget represents small graphics linked to your social media accounts, in any widget area of your theme. After adding links to your social profiles, icons are automatically represented on your site, giving your visitors to connect with you through your preferred social media networks.

In this program (Awesome Social Media Buttons with Hover Animation), at first, on the webpage, there are shown five icons or buttons of different Social Media Networks and when you hover on the particular button then the width of that button expand smoothly and visible the name of particular hovered network. This hover animation is fully created using only HTML & CSS.

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

Video Tutorial of Social Media Buttons with Hover Animation

In this video, you have seen the animation of these social media buttons and I hope you have understood the codes behind creating this animation. If you know basic HTML & CSS then you can easily understand the codes of this program and also can create this type of animation. You can use HTML anchor tag and insert your social account link inside the href attribute of tag to redirect the user to the specific social media profile.

If you like this program (Awesome Social Media Buttons with Hover Animation) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Social Media Buttons with Hover Animation [Source Codes]

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

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




   
      
      Social Media Icons | CodingNepal
      
      
   
   
      
         
            
               
            
            Facebook
         
         
            
               
            
            Twitter
         
         
            
               
            
            Instagram
         
         
            
               
            
            Github
         
         
            
               
            
            YouTube

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%;
  width: 100%;
  place-items: center;
  background: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
}
.wrapper .button{
  display: inline-block;
  height: 60px;
  width: 60px;
  float: left;
  margin: 0 5px;
  overflow: hidden;
  background: #fff;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease-out;
}
.wrapper .button:hover{
  width: 200px;
}
.wrapper .button .icon{
  display: inline-block;
  height: 60px;
  width: 60px;
  text-align: center;
  border-radius: 50px;
  box-sizing: border-box;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1):hover .icon{
  background: #4267B2;
}
.wrapper .button:nth-child(2):hover .icon{
  background: #1DA1F2;
}
.wrapper .button:nth-child(3):hover .icon{
  background: #E1306C;
}
.wrapper .button:nth-child(4):hover .icon{
  background: #333;
}
.wrapper .button:nth-child(5):hover .icon{
  background: #ff0000;
}
.wrapper .button .icon i{
  font-size: 25px;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.wrapper .button:hover .icon i{
  color: #fff;
}
.wrapper .button span{
  font-size: 20px;
  font-weight: 500;
  line-height: 60px;
  margin-left: 10px;
  transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1) span{
  color: #4267B2;
}
.wrapper .button:nth-child(2) span{
  color: #1DA1F2;
}
.wrapper .button:nth-child(3) span{
  color: #E1306C;
}
.wrapper .button:nth-child(4) span{
  color: #333;
}
.wrapper .button:nth-child(5) span{
  color: #ff0000;
}

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

CSS3 – 3D Layered Hover Effect on Social Media Buttons

CodingNepal — Thu, 04 Jun 2020 09:44:00 +0000

Hello readers, Today in this blog you’ll learn how to create 3D Layered Hover Effect on Social Media Buttons using only HTML & CSS. Earlier I have shared CSS3 – Neumorphism Social Media Buttons. Now it’s time to create 3D Layered Hover Effects on Social Media Buttons.

These social media links and buttons allow your website visitors and content viewers to easily share your content with their social media connections and networks. A social media share link is a URL that when clicked populates a fixed message and image that can be shared on social media.

Today in this blog I’ll share with you this program about Social Media Buttons with 3D Layered Hover Effects. At first, on the webpage, these buttons are in the initial stage where there is no 3D Layered effect, and icon names are also hidden at first. But when you hover on the particular social icon then that icon rotates and visible the layers of icons that visualize 3D Effect as well as texts, are also visible with sliding down.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (CSS3 – 3D Layered Hover Effect on Social Media Buttons).

Video Tutorial of 3D Layered Hover Effect on Buttons

If you’re a beginner and you have basic knowledge of HTML & CSS then you can also create these types of effects. As you know, when you clicked on a particular Social Media Button it won’t redirect you to related sites. If you want to redirect the user on the particular website when he/she clicked on the buttons then simply insert the website link inside the href attribute of an anchor tag.

If you like this program (CSS3 – 3D Layered Hover Effect on Social Media 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.

CSS3 – 3D Layered Hover Effect [Source Codes].

To create this program (CSS3 – 3D Layered Hover Effect on Social Media 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.




   
      
      3D Layered Hover Effect | CodingNepal
      
      
   
   
      
         
            
               
               
               
               
               
            
            
               Facebook
            
         
         
            
               
               
               
               
               
            
            
               Twitter
            
         
         
            
               
               
               
               
               
            
            
               Instagram
            
         
         
            
               
               
               
               
               
            
            
               Linkedin
            
         
         
            
               
               
               
               
               
            
            
               YouTube

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;
}
.icons{
  display: inline-flex;
}
.icons a{
  margin: 0 25px;
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
}
.icons a .layer{
  width: 55px;
  height: 55px;
  transition: transform 0.3s;
}
.icons a:hover .layer{
  transform: rotate(-35deg) skew(20deg);
}
.icons a .layer span{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #fff;
  border-radius: 5px;
  transition: all 0.3s;
}
.icons a .layer span.fab{
  font-size: 30px;
  line-height: 55px;
  text-align: center;
}
.icons a:hover .layer span:nth-child(1){
  opacity: 0.2;
}
.icons a:hover .layer span:nth-child(2){
  opacity: 0.4;
  transform: translate(5px, -5px);
}
.icons a:hover .layer span:nth-child(3){
  opacity: 0.6;
  transform: translate(10px, -10px);
}
.icons a:hover .layer span:nth-child(4){
  opacity: 0.8;
  transform: translate(15px, -15px);
}
.icons a:hover .layer span:nth-child(5){
  opacity: 1;
  transform: translate(20px, -20px);
}
.icons a:nth-child(1) .layer span,
.icons a:nth-child(1) .text{
  color: #4267B2;
  border-color: #4267B2;
}
.icons a:nth-child(2) .layer span,
.icons a:nth-child(2) .text{
  color: #1DA1F2;
  border-color: #1DA1F2;
}
.icons a:nth-child(3) .layer span,
.icons a:nth-child(3) .text{
  color: #E1306C;
  border-color: #E1306C;
}
.icons a:nth-child(4) .layer span,
.icons a:nth-child(4) .text{
  color: #2867B2;
  border-color: #2867B2;
}
.icons a:nth-child(5) .layer span,
.icons a:nth-child(5) .text{
  color: #ff0000;
  border-color: #ff0000;
}
.icons a:hover:nth-child(1) .layer span{
  box-shadow: -1px 1px 3px #4267B2;
}
.icons a:hover:nth-child(2) .layer span{
  box-shadow: -1px 1px 3px #1DA1F2;
}
.icons a:hover:nth-child(3) .layer span{
  box-shadow: -1px 1px 3px #E1306C;
}
.icons a:hover:nth-child(4) .layer span{
  box-shadow: -1px 1px 3px #2867B2;
}
.icons a:hover:nth-child(5) .layer span{
  box-shadow: -1px 1px 3px #ff0000;
}
.icons a .text{
  position: absolute;
  left: 50%;
  bottom: -5px;
  opacity: 0;
  font-weight: 500;
  transform: translateX(-50%);
  transition: bottom 0.3s ease, opacity 0.3s ease;
}
.icons a:hover .text{
  bottom: -35px;
  opacity: 1;
}

That’s all, now you’ve successfully created a CSS3 – 3D Layered Hover Effect on Social Media Buttons. If your code not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

CSS3 Neomorphic Social Media Buttons

CodingNepal — Sat, 30 May 2020 13:50:00 +0000

Hello readers, Today in this blog you’ll learn how to create Neumorphic Social Media Buttons using HTML & CSS only. Earlier I have shared a CSS3 Neumorphism Login Form Design. Now it’s time to create Neumorphic Social Media Buttons.

The Social links and buttons enable your website visitors and content viewers to easily share your content with their social media connections and networks.

Today in this blog, I’ll share with you a Neomorphic Social Media Buttons. These Social Media Buttons are created only for design purposes. There is no action and it won’t redirect you to any other sites when you triggered on those buttons.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (CSS3 Neumorphic Social Media Buttons).

Video Tutorial of Neumorphic Social Media Buttons

I hope you have understood the basic codes of this Neumorphic effect. There are no vast codes, there are creative role box-shadows only. If you’re a beginner and you have little knowledge of HTML & CSS only then you can also create this type of Neumorphic Effect on Buttons, Social Media Icons, Cards, etc. You can add the link of your social site inside the href attribute of anchor tag if you want to redirect users or viewers when they click on the specific button.

If you like this Neumorphsim UI 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.

Neomorphic Social Media Icons [Source Codes]

To create this program (Neumorphism Social Media 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.




   
      
      CSS3 - Neumorphic Social Icons

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.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  background: #dde1e7;
  width: 100%;
}
.icons{
  display: flex;
  margin: 40px 0;
}
li{
  position: relative;
  list-style: none;
  height: 70px;
  width: 70px;
  margin: 0 10px;
  border-radius: 50%;
  background: #dde1e7;
  cursor: pointer;
  box-shadow: -3px -3px 7px #ffffff73,
              3px 3px 5px rgba(94,104,121,0.288);
}
li a{
  line-height: 70px;
  font-size: 27px;
  color: #b6bbc5;
}
.first li.shadow-1{
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 3px 3px 5px rgba(94,104,121,0.288);
}
.first li.shadow-1 a{
  font-size: 25px;
}
.second li.shadow-2 a{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 55px;
  width: 55px;
  line-height: 55px;
  border-radius: 50%;
  background: #dde1e7;
  font-size: 24px;
  box-shadow: inset -3px -3px 7px #ffffff73,
              inset 3px 3px 5px rgba(94,104,121,0.288);
}
li:nth-child(1).fill-color a{
  color: #4267B2;
}
li:nth-child(2).fill-color a{
  color: #1DA1F2;
}
li:nth-child(3).fill-color a{
  color: #E1306C;
}
li:nth-child(4).fill-color a{
  color: #2867B2;
}
li:nth-child(5).fill-color a{
  color: #333;
}

That’s all, now you’ve successfully created CSS3 Neomorphic Social Media Buttons. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Glowing Social Media Icons using only HTML & CSS

CodingNepal — Sun, 03 May 2020 08:39:00 +0000

Hello readers, Today in this blog you’ll learn how to create Social Media Icons with CSS Glowing Effect. Previously I have shared Social Media Icons with Hover Animation using only HTML and CSS, now it’s time to create a Social Media Button with Glowing Effect.

The Social Media Widget is a simple widget that allows users to insert their social networks and connections profile URLs and other subscription options to show an icon to that social media site and more that open up in a separate browser window.

At first, these icons are in the initial stage where there is no glow effect. But when you hover on it, the specific hovered icon starts to glow. In the image, there is 2 Social Media Widget List with the same icons but which different glow colors. In the first widget, there are gold color glowing effects and in the second widget, there are default logo color glowing effects.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Glowing Social Media Icons Widget).

Video Tutorial of CSS Glowing Social Media Icons on Hover

I hope you like these glowing effects and understanding the basic codes behind the creating of this Glowing Social Media Icons Widget. As you have seen in the video this is an effect that is based on only HTML & CSS. And, I believe a beginner who has a basic knowledge of HTML & CSS also can create this type of glow effect.

If you like this program (Glowing Social Media Icons Widget) 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.

Glowing Social Media Icons using HTML & CSS [Source Codes]

To create this program (Glowing Social Media Icons Widget). 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 Social Icons

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.

*{
  margin: 0;
  padding: 0;
  list-style: none;
}
body{
  display: flex;
  height: 100vh;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: #262626;
}
ul{
  display: flex;
}
ul li{
  position: relative;
  display: block;
  color: #666;
  font-size: 30px;
  height: 60px;
  width: 60px;
  background: #171515;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 15px;
  cursor: pointer;
  transition: .5s;
}
ul li:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  /* background: #d35400; */
  border-radius: 50%;
  transform: scale(.9);
  z-index: -1;
  transition: .5s;
}
ul li:nth-child(1):before{
  background: #4267B2;
}
ul li:nth-child(2):before{
  background: #1DA1F2;
}
ul li:nth-child(3):before{
  background: #E1306C;
}
ul li:nth-child(4):before{
  background: #2867B2;
}
ul li:nth-child(5):before{
  background: #ff0000;
}
ul li:hover:before{
  filter: blur(3px);
  transform: scale(1.2);
  /* box-shadow: 0 0 15px #d35400; */
}
ul li:nth-child(1):hover:before{
  box-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover:before{
  box-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover:before{
  box-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover:before{
  box-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover:before{
  box-shadow: 0 0 15px #ff0000;
}
ul li:nth-child(1):hover{
  color: #456cba;
  box-shadow: 0 0 15px #4267B2;
  text-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover{
  color: #26a4f2;
  box-shadow: 0 0 15px #1DA1F2;
  text-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover{
  color: #e23670;
  box-shadow: 0 0 15px #E1306C;
  text-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover{
  color: #2a6cbb;
  box-shadow: 0 0 15px #2867B2;
  text-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #ff0000;
  text-shadow: 0 0 15px #ff0000;
}
/* ul li:hover{
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
} */

That’s all, now you’ve successfully created a Glowing Social Media Icons Widget using only 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.

Awesome Hover Animation on Social Media Icons using HTML & CSS

CodingNepal — Fri, 01 May 2020 10:09:00 +0000

Hello reader, Today in this blog you’ll learn how to create Floating Social Media Icons with Hover Animation using only HTML & CSS. Previously I have shared a Scroll To Top or Back To Top Button using only HTML and CSS, now it’s time to create a Social Media Button with Hover Animation.

The Social Icons Widget represents small graphics linked to your social media accounts, in any widget area of your theme. After adding links to your social profiles, social icons are automatically displayed on your site, letting your visitors connect with you via your chosen networks.

As you can see in the image, this is a stylish Floating Social Media Widget, which is based on only HTML & CSS. There are some social media icons like Facebook, Twitter, Instagram, Github, and YouTube.

All icon’s background is in gradient color that means two colors are mixed to create a background. At first, all icon’s background has been square but when you’ll hover on the particular icon the background rotates at 360 deg and the shape of the background will be a circle. If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Awesome Hover Animation on Social Media Icons).

Video Tutorial of Awesome Social Media Icons

I hope you understood the basic codes and concepts behind creating this widget. And I believe you like this Hover Animation. You can use this Social Media Widget on your website, projects, and wherever you want. If you have basic knowledge of HTML & CSS, you can take this widget to the next level after changing some lines of code.

If you like this Social Media Widget with Hover Animation and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Awesome Hover Animation on Social Media Icons [Source Codes]

To create this Awesome Social Media Widget. 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.




   
      
      Social Icons Hover Animation | 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.

*{
  margin: 0;
  padding: 0;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
}
.icons{
  list-style: none;
}
.icons li{
  height: 70px;
  width: 70px;
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
  position: relative;
}
.icons li:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  border-radius: 10%;
  background: linear-gradient(45deg, #7b00e0, #ae31d9);
  transition: all 0.3s ease-in;
}
.icons li:hover:before{
  transform: rotate(360deg);
  border-radius: 100%;
}
.icons li a span{
  font-size: 27px;
  line-height: 70px;
  color: #fff;
  transition: all 0.3s ease-out;
}
.icons li:hover a span{
  transform: scale(1.2);
}

That’s all, now you’ve successfully created an Awesome Hover Animation on Social Media Icons 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.

Fixed Social Media Sidebar Widget using HTML & CSS

CodingNepal — Tue, 28 Apr 2020 09:41:00 +0000

Hello readers, Today in this blog you’ll learn how to create Fixed Social Media Share Widget using HTML and CSS only. Previously I have shared a Pure CSS Responsive Cards Design with Hover Effect, now it’s time to create a Fixed Social Media Share Widget using only HTML & CSS.

Fixed Social Media Sidebar Widget which commonly used by many websites or blogs. This is a kind of WordPress plugin that builds the same type of social sharing widget. You will see mostly that kind of sharing button on many websites because this design is the default form of several plugins.

As you can see in the image, this is a fixed sidebar social media share widget using only HTML & CSS. In the image, you can see there are some social icons and one background image. All icons color by default their logo color, When you hover on it, the specific icon expands smoothly to show or informing which network it is.

If you’re feeling difficulty understanding what I am saying. You can watch a full video tutorial on this program (Fixed Social Media Sidebar Widget).

Video Tutorial of Fixed Sidebar Social Media Share

I hope you understood the basic codes and concepts of this design. As you have seen in the video this is a pure CSS program, which means only HTML & CSS used to create this Fixed Sidebar Social Media Share Widget.

If you like this program (Fixed Social Media Sidebar Widget) and want to get the source codes of this widget. You can easily get it from the download link which is given below.

Fixed Social Media Share Widget [Source Codes]

To create this program (Fixed Social Media Sidebar Widget). 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.




   
      
      Floating Icons on Left Border
      
      
   
   
      
         
            Facebook
            Twitter
            Instagram
            Linkedin
            Github
            Youtube

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');
*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
body{
  font-family: 'Montserrat', sans-serif;
  background: url(bg.jpeg);
  background-position: center;
  background-size: cover;
  height: 100vh;
}
nav{
  position: fixed;
  width: 70px;
  margin-top: 150px;
  transition: all 0.3s linear;
  box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
}
nav li{
  height: 60px;
  position:relative;
}
nav li a{
  color: white;
  display: block;
  height: 100%;
  width: 100%;
  line-height: 60px;
  padding-left:25%;
  border-bottom: 1px solid rgba(0,0,0,.4);
  transition: all .3s linear;
}
nav li:nth-child(1) a{
  background: #4267B2;
}
nav li:nth-child(2) a{
  background: #1DA1F2;
}
nav li:nth-child(3) a{
  background: #E1306C;
}
nav li:nth-child(4) a{
  background: #2867B2;
}
nav li:nth-child(5) a{
  background: #333;
}
nav li:nth-child(6) a{
  background: #ff0000;
}
nav li a i{
  position:absolute;
  top: 17px;
  left: 20px;
  font-size: 27px;
}
ul li a span{
  display: none;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
a:hover {
  z-index:1;
  width: 200px;
  border-bottom: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 0 1px 1px rgba(0,0,0,.3);
}
ul li:hover a span{
  padding-left: 30%;
  display: block;
}

That’s all, now you’ve successfully created a Fixed Social Media Sidebar Widget 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.

Social Media Buttons – CodingNepal

Neumorphism Effect on Social Media Icons CSS

Video Tutorial Neumorphism Effect on Social Media Icons CSS

You Might Like This:

Hover Effect o Social Media Icons [Source Codes]

3D Social Media Buttons using only HTML & CSS

Video Tutorial of 3D Social Media Buttons

You might like this:

3D Social Media Buttons [Source Codes]

Social Media Buttons with Tooltip on Hover using only HTML & CSS

Video Tutorial of Social Media Buttons with Tooltip

You might like this:

Social Media Buttons with Tooltip [Source Codes]

Awesome Social Media Buttons with Hover Animation | HTML & CSS

Video Tutorial of Social Media Buttons with Hover Animation

You might like this:

Social Media Buttons with Hover Animation [Source Codes]

CSS3 – 3D Layered Hover Effect on Social Media Buttons

Video Tutorial of 3D Layered Hover Effect on Buttons

CSS3 – 3D Layered Hover Effect [Source Codes].

CSS3 Neomorphic Social Media Buttons

Video Tutorial of Neumorphic Social Media Buttons

Neomorphic Social Media Icons [Source Codes]

Glowing Social Media Icons using only HTML & CSS

Video Tutorial of CSS Glowing Social Media Icons on Hover

You might like this:

Glowing Social Media Icons using HTML & CSS [Source Codes]

Awesome Hover Animation on Social Media Icons using HTML & CSS

Video Tutorial of Awesome Social Media Icons

Awesome Hover Animation on Social Media Icons [Source Codes]

Fixed Social Media Sidebar Widget using HTML & CSS

Video Tutorial of Fixed Sidebar Social Media Share

Fixed Social Media Share Widget [Source Codes]