How to Create Floating Social Media Icons?
- MultiWebPress
- September 11, 2021
- 5 Comments
Hello Guys, today in this blog you’ll learn how to create a Floating Social Media Button using pure HTML & CSS. This is for beginners who want to learn new stuff using HTML & CSS. Recently, I have shared a How to create 3D Button in Html & CSS?.. Now it’s time to create a Sticky Social Icons using Hypertext Preprocessor Language (HTML) and CSS.
You can add anchor tag inside each button to redirect the user to your particular preferred social network site/account on a button click.
<a href=" Enter your Url">
If you’re finding difficulty understanding what is written in this blog you can also watch video youtube. Just scroll down to check video tutorial.
Video tutorial Floating Social Media Icons
You may also like:
If you like this Sticky Button (Social Media Buttons) and want to use it in your project you can freely copy then paste it in your project without any restriction, And you can take these Floating Social Buttons to the next level with your creativity.
Sticky Floating Social Icons (Social Media Share Button) [Source Codes]
To create this small task (Sticky Floating Social Icons Button). You need to create two files. The two files are index.html and another one is a style.css file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file.
Let’s create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension
HTML CODE
<!--Coding by MultiWebPress // https://www.youtube.com/channel/UCvB-4cVzkhvu4TkTy1hs9zA-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating Social Media Icons | Multiwebpress</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="box">
<div class="container">
<div class="icon facebook">
<div class="tooltip">
Facebook
</div>
<span><a href="https://multiwebpress.com/"><i class="fab fa-facebook-f"></i></a></span>
</div>
<div class="icon youtube">
<div class="tooltip">
Youtube
</div>
<span><a href="https://multiwebpress.com/"><i class="fab fa-youtube"></a></i></span>
</div>
<div class="icon twitter">
<div class="tooltip">
Twitter
</div>
<span><a href="https://multiwebpress.com/"><i class="fab fa-twitter"></a></i></span>
</div>
<div class="icon instagram">
<div class="tooltip">
Instagram
</div>
<span><a href="https://multiwebpress.com/"><i class="fab fa-instagram"></a></i></span>
</div>
</div>
</div>
</body>
</html>
CSS CODE
Create a Cascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your HTML file. Remember you’ve to create a file with a .css extension
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
*{
margin: 0; padding:0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
html, body{
left:0px;
display: grid;
height: 200vh;
width: 100%;
background: linear-gradient(90deg, rgba(211,244,10,1) 0%, rgba(197,255,170,0.804359243697479) 35%, rgba(0,212,255,1) 100%);
}
.box{
display: grid;
height: 100vh;
width: 100%;
align-items: center;
background: linear-gradient(315deg, #ffffff 0%, #d7e1ed 74%);
}
.container{
position: fixed;
top: 35vh;
}
.container .icon{
margin:0 5px;
text-align: center;
cursor: pointer;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
transition: 0.4s cubic-bezier(0.52, -0.50, 0.212, 1.45);
}
.container .icon span{
position: relative;
display: block;
height: 60px;
width: 60px;
background: #fff;
border-radius: 0%;
z-index: 2;
transition: 0.4s cubic-bezier(0.52, -0.50, 0.212, 1.45);
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
}
.container .icon span i{
line-height: 60px;
font-size: 25px;
color: #fff;
}
.container .icon .tooltip{
position: absolute;
background: #fff;
color: #fff;
padding: 10px 18px;
font-size: 20px;
font-weight: 800;
border-radius: 0px;
top:20px;
left: 80px;
z-index: 1;
opacity: 0;
pointer-events: none;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: 0.4s cubic-bezier(0.52, -0.50, 0.212, 1.45);
}
.container .icon:hover .tooltip{
top: -0px;
opacity: 1;
margin-top: 10px;
pointer-events: auto;
}
.icon .tooltip:before{
position: absolute;
content: "";
height: 15px;
width: 15px;
background: #fff;
left: 3px;
bottom: 15px;
transform: translate(-50%) rotate(45deg);
transition: 0.4s cubic-bezier(0.52, -0.50, 0.212, 1.45);
}
.container .facebook span,
.container .facebook .tooltip,
.container .facebook .tooltip:before{
background: #3b5999;
color: #fff;
}
.container .youtube span,
.container .youtube .tooltip,
.container .youtube .tooltip:before{
background: #de463b;
color: #fff;
}
.container .twitter span,
.container .twitter .tooltip,
.container .twitter .tooltip:before{
background: #46c1f6;
color: #fff;
}
.container .instagram span,
.container .instagram .tooltip,
.container .instagram .tooltip:before{
background: #e1306c;
color: #fff;
}
After creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)
That’s all, now you’ve successfully created Floating Social Icons using HTML & CSS.
If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.
Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on Instagram.
Thanks in Advance!
SHARE
Categories
- Bootstrap (1)
- CSS Buttons (3)
- Footer (1)
- HTML & CSS (15)
- Login Form (1)
- Navigation Bar (2)
- Recommended Posts (17)
- Social Media Buttons (2)
- Templates (2)
- WordPress (10)
5 Responses
thanks for the valuable content.
You’re Welcome!
Thank you so much 😀
Thank you very much!
You’re welcome:)