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 |
Draggable add element | 2,642 Kb |
Grid Resizable Drag and Drop, Masonery | 2,437 Kb |
404 not found page | 3,165 Kb |
Side Sliding Menu CSS | 4,388 Kb |
HackaGlobal | 1,798 Kb |
Sticker.js Peel and drag the edge to unstick te element | 1,962 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 |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Disable JavaScript execution from console | Ludviglindblom | 2,534 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
Getting Started | Viblast | 1,500 Kb |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
Toolbar | Onsen | 5,414 Kb |
V.35 The Monolith Update - Hero Release Notes | Jordan | 12,045 Kb |
Colorful Sliders | Chanrith | 1,246 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!