Animated Social Media Fixed Buttons Using HTML and CSS programming languages.
I am Santanu Jana a web designer. I will help you to create a beautiful and responsive social menu bar using HTML and CSS programming language. In this article, I will show you and teach you how to easily create a Responsive, Fixed Social Media Buttons.
How To Create Fixed Social Media button with Source Code
This article will help you to create a fixed social media sidebar and provide source code for download. I have used the easiest and most general code for you to learn so that you can easily understand and know. To do this you need to have no special programming knowledge. Because I showed you the complete step by step and gave you the necessary source code. I have shown you how to use your project or website by copying that source code.
Some special information about this animated social media icon
This side menu bar is fully professional and responsive, built using only HTML and CSS programming languages.
The social menu bar used here is fully animated and hover. Some animations can be noticed when you hover or click the mouse over this site menu bar.
This side menu bar usually has some icons attached to the side. When you hover the mouse over it, this menu bar will expand up to 40px and show some text along with it. For example, if it is Facebook, then facebook-logo will increase up to 40 px and Facebook will be seen. This way you can add as many icons as you like.
Here I have basically created a menu bar by adding popular social icons. This side menu bar you can easily use in the project, website, or blog of your choice. It is completely professional and responsive. If you want to learn how to create an animated social icon or menu bar using only HTML and CSS programming languages, this article or the code below will be very helpful for them.
You can see the live demo by clicking on the demo option below. Also if you want to download that code completely free, then click on the download button below.
Watch the video on how to create Fixed Social Media Buttons
Floatings social media bar Using HTML and CSS[Source Code⇩]
Hopefully from the video above you can fully understand how to make and work this Fixed Social Media Buttons. If you want to try this code yourself, you can. That is why I have given the source code below. First of all, you create an HTML file (rename.html) and a CSS file (rename.css). Then you put the HTML code in the HTML file and the CSS code null in the CSS file. Be sure to link the HTML and cis code to each other (<linkrel="stylesheet"href="sidebar.css">).
I would especially request you to download the code by clicking on the download button below. Because when I uploaded the code, I had some special problems with Google. So I have added some comments to this code. If you want to copy the code below and use it in your project, you can delete those comments if you want. There will be no problem if you do not omit. These comments will not cause any problems for your program or project.
HTML TAGS (<body> Add Code</body>)
This code is an HTML code (rename.html). Put this code in the head tags of your project and also in the head tags in the HTML file.
<p>Like on Facebook <i class="fa fa-facebook "></i> </p>
</a>-->
</div>
</div>
CSS CODE (<head><style>Add code</style></head>)
This code is a CSS code (rename.css). You enter this code in the style tags in the head tags of your project. Also, you put in the style tags in the CSS file.
body {
background-color: #2c3e50;
}
a {
text-decoration: none;
vertical-align: middle;
text-align: center;
line-height: 3;
}
/*.heading {
font-family: "Montserrat", Arial, sans-serif;
font-size: 4rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
padding: 3.5rem 0;*/
p {
color: white;
position: relative;
left: -10px;
font-family: 'Lato';
}
#sidebar {
height: 250px;
width: 10px;
position: fixed;
text-align: center;
padding: 10px;
margin-left: 10px;
}
/*.heading {
font-family: "Montserrat", Arial, sans-serif;
font-size: 4rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
padding: 3.5rem 0;*/
pi {
left: 30px;
position: relative;
vertical-align: middle;
text-align: center;
font-size: 24px;
}
.social {
margin-left: -200px;
width: 230px;
padding: 0;
display: inline-table;
height: 0px;
background-color: rgba(128, 128, 128, 0.73);
-moz-transition-property: margin-left;
-moz-transition-duration: 0.2s;
-moz-transition-delay: 0.2s;
/*.heading {
font-family: "Montserrat", Arial, sans-serif;
font-size: 4rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
padding: 3.5rem 0;*/
-ms-transition-property: margin-left;
-ms-transition-duration: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-property: margin-left;
-o-transition-duration: 0.2s;
-o-transition-delay: 0.2s;
-webkit-transition-property: margin-left;
-webkit-transition-duration: 0.2s;
-webkit-transition-delay: 0.2s;
box-shadow: 0px0px6px0px#3E3D3D;
cursor: pointer;
}/*.heading {
font-family: "Montserrat", Arial, sans-serif;
font-size: 4rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
padding: 3.5rem 0;*/
.social:hover {
margin-left: -30px;
width: 230px;
background-color: #3b5998;
}
.facebook:hover {
background-color: #3b5998;
}
.twitter:hover {
background-color: #4099FF;
}/*.heading {
font-family: "Montserrat", Arial, sans-serif;
font-size: 4rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
padding: 3.5rem 0;*/
.google:hover {
background-color: #DD4B39;
}
.linkedinpi {
left: 20px;
}
.googlepi {
left: 35px;
}
.youtubepi {
left: 18px;
}
/*.heading {
font-family: "Montserrat", Arial, sans-serif;
font-size: 4rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
padding: 3.5rem 0;*/
.youtube:hover {
background-color: #E52D27;
}
.linkedin:hover {
background-color: #0976B4;
}/*.heading {
font-family: "Montserrat", Arial, sans-serif;
font-size: 4rem;
font-weight: 500;
line-height: 1.5;
text-align: center;
padding: 3.5rem 0;*/
Hopefully, the above article has helped you to know and learn how to create an HTML and CSS Fixed Social Media Buttons. Those who had this question in mind, how to create a side menu bar using only HTML and CSS programming languages. Hopefully, they got their answer. If you are facing any other problem while making this project. But of course, you can let me know by commenting and I will try to help you as much as possible. Special thanks to you for reading to the end of the article.
![Make Racing Car Game [Using JavaScript Code Only]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrVmbtoZxLonUlDyWpFe9gEe9Z1b2zrrfm4i5dwOqw2YQ41SElTjXTvhWSxHTwMQBmWmFMoKTSxUtGc3hAjOh6T-8jMXBlvbXOnaGHq8RP74rRlg4mPR4EuER3Yhb5My-reWpoARLnS8/w680/Make+Racing+Car+Game+%255BUsing+JavaScript+Code+Only%255D.jpg)
