Icon Hover Animation – CodingNepal

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.

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.