Buttons animation

3D Social media icons in Html and CSS with animation

Today, we will create 3D social media icons and these icons have a lot of properties and functions. In the last post, we created animated buttons in Html and CSS. Let us create/design social platform icons.

It helps the website to grow easily. Users visit the website and if they like any type of content on the website then they start sharing the content on social media with their friends. As a result, they start visiting the website and it helps in the growth of the website.

You can share the content of the website to these platforms with the help of these icons. All the icons are round in shape with the same background color. When we hover over it then they start the animation from the original position and also change the color due to the hovering property.

You might like it:

We can create them using different languages and platforms but in this post, we are going to create them using Html and CSS for our website and it will be done in three steps for our website.

Download any editor from below.

VS CODE

Sublime text 3

Brackets

Source code of Html:

The HTML source code is below. Buttons are added using the important tag of HTML <button>. It is also used to build all the website pages with their proper content without any design.

<ul>
  <li>
    <a href="#">
      <i class="fa fa-facebook" aria-hidden="true"></i>
      <span> - Facebook</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-twitter" aria-hidden="true"></i>
      <span> - Twitter</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-google-plus" aria-hidden="true"></i>
      <span> - Google</span>
    </a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-instagram" aria-hidden="true"></i>
      <span> - Instagram</span>
    </a>
  </li>
  </ul>

<ul>

<li>

- Facebook

</a>

</li>

<li>

- Twitter

</a>

</li>

<li>

- Google

</a>

</li>

<li>

- Instagram

</a>

</li>

</ul>

Source code of CSS:

CSS source code is below.

  body {
  margin:0;
  padding:0;
  background:#ccc;
  font-family: 'Roboto Condensed', sans-serif;

}

ul {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:flex;
  margin:0;
  padding:0;
}

ul li {
  list-style:none;
  margin:0 5px;
}

ul li a .fa {
  font-size: 40px;
  color: #262626;
  line-height:80px;
  transition: .5s;
  padding-right: 14px;
}

ul li a span {
  padding:0;
  margin:0;
  position:absolute;
  top: 30px;
  color: #262626;
  letter-spacing: 4px;
  transition: .5s;
}

ul li a {
  text-decoration: none;
  display:absolute;
  display:block;
  width:210px;
  height:80px;
  background: #fff;
  text-align:left;
  padding-left: 20px;
  transform: rotate(-30deg) skew(25deg) translate(0,0);
  transition:.5s;
  box-shadow: -20px 20px 10px rgba(0,0,0,.5);
}
ul li a:before {
  content: '';
  position: absolute;
  top:10px;
  left:-20px;
  height:100%;
  width:20px;
  background: #b1b1b1;
  transform: .5s;
  transform: rotate(0deg) skewY(-45deg);
}
ul li a:after {
  content: '';
  position: absolute;
  bottom:-20px;
  left:-10px;
  height:20px;
  width:100%;
  background: #b1b1b1;
  transform: .5s;
  transform: rotate(0deg) skewX(-45deg);
}

ul li a:hover {
  transform: rotate(-30deg) skew(25deg) translate(20px,-15px);
  box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}

ul li:hover .fa {
  color:#fff;
}

ul li:hover span {
  color:#fff;
}

ul li:hover:nth-child(1) a{
  background: #3b5998;
}
ul li:hover:nth-child(1) a:before{
  background: #365492;
}
ul li:hover:nth-child(1) a:after{
  background: #4a69ad;
}

ul li:hover:nth-child(2) a{
  background: #00aced;
}
ul li:hover:nth-child(2) a:before{
  background: #097aa5;
}
ul li:hover:nth-child(2) a:after{
  background: #53b9e0;
}

ul li:hover:nth-child(3) a{
  background: #dd4b39;
}
ul li:hover:nth-child(3) a:before{
  background: #b33a2b;
}
ul li:hover:nth-child(3) a:after{
  background: #e66a5a;
}

ul li:hover:nth-child(4) a{
  background: #e4405f;
}
ul li:hover:nth-child(4) a:before{
  background: #d81c3f;
}
ul li:hover:nth-child(4) a:after{
  background: #e46880;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

body {

margin:0;

padding:0;

background:#ccc;

font-family: 'Roboto Condensed', sans-serif;

}

ul {

position:absolute;

top:50%;

left:50%;

transform:translate(-50%, -50%);

display:flex;

margin:0;

padding:0;

}

ul li {

list-style:none;

margin:0 5px;

}

ul li a .fa {

font-size: 40px;

color: #262626;

line-height:80px;

transition: .5s;

padding-right: 14px;

}

ul li a span {

padding:0;

margin:0;

position:absolute;

top: 30px;

color: #262626;

letter-spacing: 4px;

transition: .5s;

}

ul li a {

text-decoration: none;

display:absolute;

display:block;

width:210px;

height:80px;

background: #fff;

text-align:left;

padding-left: 20px;

transform: rotate(-30deg) skew(25deg) translate(0,0);

transition:.5s;

box-shadow: -20px 20px 10px rgba(0,0,0,.5);

}

ul li a:before {

content: '';

position: absolute;

top:10px;

left:-20px;

height:100%;

width:20px;

background: #b1b1b1;

transform: .5s;

transform: rotate(0deg) skewY(-45deg);

}

ul li a:after {

content: '';

position: absolute;

bottom:-20px;

left:-10px;

height:20px;

width:100%;

background: #b1b1b1;

transform: .5s;

transform: rotate(0deg) skewX(-45deg);

}

ul li a:hover {

transform: rotate(-30deg) skew(25deg) translate(20px,-15px);

box-shadow: -50px 50px 50px rgba(0,0,0,.5);

}

ul li:hover .fa {

color:#fff;

}

ul li:hover span {

color:#fff;

}

ul li:hover:nth-child(1) a{

background: #3b5998;

}

ul li:hover:nth-child(1) a:before{

background: #365492;

}

ul li:hover:nth-child(1) a:after{

background: #4a69ad;

}

ul li:hover:nth-child(2) a{

background: #00aced;

}

ul li:hover:nth-child(2) a:before{

background: #097aa5;

}

ul li:hover:nth-child(2) a:after{

background: #53b9e0;

}

ul li:hover:nth-child(3) a{

background: #dd4b39;

}

ul li:hover:nth-child(3) a:before{

background: #b33a2b;

}

ul li:hover:nth-child(3) a:after{

background: #e66a5a;

}

ul li:hover:nth-child(4) a{

background: #e4405f;

}

ul li:hover:nth-child(4) a:before{

background: #d81c3f;

}

ul li:hover:nth-child(4) a:after{

background: #e46880;

}

Download source code:

The source code of icons is available below and you can download it for free.

Task:

The source code and instructions for the development of these icons are given above. Now it’s modification time. We have created the icons for Facebook, Google, Twitter, and Instagram. Change the icons of all these buttons to other platforms like Pinterest, Linkedin, etc. Also, add a hover effect on these icons but the hover effect on all the buttons should be different from others.

If you find it helpful then must follow us. We are also available on different social media platforms and you can also follow us on different social media platforms.

Go to top

Download Source CodeClick to Download