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.
3D Social media 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:
How to create social media icons?
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 code editor for social media icons:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<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> |
Source code of CSS:
CSS source code is below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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.
Download Source CodeClick to Download
