Hello developers, today in this blog you'll learn to create Sticky Social Media Icons using HTML & CSS.
A sticky or fixed bar is a graphical UI element of the website, which is commonly used in many websites. Social media icons are used to increase the social engagement of the website. These social icons allow visitors to see all your social media pages and to share content on social media from where ever they are on your website.
In this blog (Sticky Social Media Icons), there are five social media icons that are Facebook, Twitter, Google, Linkedin, and YouTube are placed at the left middle of the web page. Can place any number of social media icons. When the user scrolls the page up or down, the social media icons will be fixed in that place, it won't move.
CSS border-radius property has been used to make the icons circular. All icons have their default logo color. When you hover on every icon, the color of the icon changes, and there will be a shadow on the icon.
The source code of this Sticky Social Media Icons is given below, if you want the source code of this program, you can copy it. You can use these Sticky social media icons with your creativity and can take this project to the next level.
Sticky Social Media Icons [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you've got to make a file with a .css extension.
body {
margin:0;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
.icon-bar {
position: fixed;
top: 50%;
left:10px;
border:none;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.icon-bar a {
display: block;
border:none;
text-align: center;
padding: 15px;
transition: all 0.3s ease;
color: white;
margin-bottom:10px;
font-size: 20px;
border-radius: 50%;
}
.icon-bar a:hover {
background-color: #12192c;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.facebook {
background: #3B5998;
color: white;
}
.twitter {
background: #55ACEE;
color: white;
}
.google {
background: #dd4b39;
color: white;
}
.linkedin {
background: #007bb5;
color: white;
}
.youtube {
background: #bb0000;
color: white;
}
.content {
margin-left: 75px;
margin-right: 25px;
font-size: 30px;
}
.content > h3{
background-color: #12192c;
color:#FBAB7E;
border-radius: 12px;
width:25%;
padding: 5px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.credit{
text-align: center;
color: #000;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#000;
font-weight: bold;
}We
hope you would like this
Thank you for reading our blog. If you face any problem in creating this Sticky Social Media Icons using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team