Social Menu
How do I make an social menu?
What is a social menu? How do you make a social menu? This script and codes were developed by Eduard L. on 15 October 2022, Saturday.
Social Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <a href="#" class="f"><span class="entypo-facebook fa"></span><span class="entypo-facebook fb fa"></span></a> <a href="#" class="t"><span class="entypo-twitter ta"></span><span class="entypo-twitter tb"></span></a> <a href="#" class="p"><span class="entypo-pinterest pa"></span><span class="entypo-pinterest pb"></span></a>
</div>
</body>
</html>
Social Menu - Script Codes CSS Codes
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
*{ margin:0; padding:0;
} body
{ margin:0px; padding:0px; background:url('http://wallpoper.com/images/00/36/66/70/colorful-gaussian_00366670.jpg'); text-align:center;
}
p{ font-family:tahoma; font-size:12px; width:100%; bottom:10px; position:absolute;
}
#container{ margin:10px auto; display:inline-block; font-size:0; height:51px; overflow:hidden;
}
a{ text-decoration:none; display:inline-block; font-size:40px; width:60px; overflow:hidden; position:relative; transition:all 0.5s;
}
.p{ color:#CB1F26;
}
.g{ color:#DB4A38;
}
.f{ color:#3B5998;
}
.t{ color:#00BEF6;
}
.fa, .fb, .ta, .tb, .ga, .gb, .pa, .pb{ display:block;
}
.fb, .tb, .gb, .pb{ color:white;
}
.fb{ background:#3B5998;
}
.tb{ background:#00BEF6;
}
.gb{ background:#DB4A38;
}
.pb{ background:#CB1F26;
}
.f:hover, .t:hover, .g:hover, .p:hover { transform: translateY(-48px); -moz-transform: translateY(-48px); -webkit-transform: translateY(-48px); transition:all 0.5s; -moz-transition:all 0.5s; -webkit-transition:all 0.5s;
}
Developer | Eduard L. |
Username | EduardL |
Uploaded | October 15, 2022 |
Rating | 3 |
Size | 1,931 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
HackaGlobal | 1,798 Kb |
404 not found page | 3,165 Kb |
Side Sliding Menu CSS | 4,388 Kb |
Social Menu | 1,931 Kb |
Sticker.js Peel and drag the edge to unstick te element | 1,962 Kb |
Draggable add element | 2,642 Kb |
Grid Resizable Drag and Drop, Masonery | 2,437 Kb |
A Pen by Eduard L. | 3,953 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Flat design iframe | Damienpm | 1,819 Kb |
Wikipedia Viewer | Odylic | 2,333 Kb |
Mesmerizing octopus | Jllodra | 3,549 Kb |
Adding Items | Valhead | 4,008 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
A Pen by Jason Kinney | Jason-kinney | 1,980 Kb |
Two Element Typeface | Chrisota | 4,942 Kb |
Animate elements with fixed gradient | Badabam | 4,406 Kb |
Scroll using CSS | Casperovic | 2,159 Kb |
Ocean | Gordonnl | 2,817 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!