Awesome CSS Footer Social Buttons

Developer
Faizan Asad
Size
2,179 Kb
Views
48,576
  1. Awesome CSS Footer Social Buttons Previews
  2. Awesome CSS Footer Social Buttons HTML Codes
  3. Awesome CSS Footer Social Buttons CSS Codes

How do I make an awesome css footer social buttons?

Best social buttons for footer: Popup social buttons. What is a awesome css footer social buttons? How do you make a awesome css footer social buttons? This script and codes were developed by Faizan Asad on 04 July 2022, Monday.

Awesome CSS Footer Social Buttons Previews
IQ Test

Awesome CSS Footer Social Buttons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Awesome CSS Footer Social Buttons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="content"> <input type="checkbox" class="checkbox" id="share" checked> <label for="share" class="label entypo-export"></label> <div class="social"> <ul> <li class="entypo-twitter"></li> <li class="entypo-facebook"></li> <li class="entypo-gplus"></li> </ul> </div>
</div>
</body>
</html>

Awesome CSS Footer Social Buttons - Script Codes CSS Codes

@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
::selection {
background: transparent;
}
html { margin:0; padding:50px 0; background:#​​6315C9;
}
#content { text-align:center; position:absolute; left:0; right:0; margin:auto; padding:120px 0 10px 0; width:200px; height:20px;
}
input[type="checkbox"]{display:none;}
.checkbox:checked + .label{ background:#7B7484; color:#231733;
}
.checkbox:checked ~ .social { opacity:1; -webkit-transform: scale(1) translateY(-90px); -moz-transform:scale(1) translateY(-90px); -o-transform:scale(1) translateY(-90px); transform:scale(1) translateY(-90px); -webkit-transition:.5s; -moz-transition:.5s; -o-transition:.5s; transition:.5s;
}
.label { font-size:16px; cursor:pointer; margin:0; padding:5px 10px; border-radius:10%; color:#7B7484;
}
.social { transform-origin:50% 0%; -webkit-transform: scale(0) translateY(-190px); -moz-transform:scale(0) translateY(-190px); -o-transform:scale(0) translateY(-190px); transform:scale(0) translateY(-190px); opacity:0;
}
ul { position:relative; left:0; right:0; margin:auto; color:#fff; height:46px; width:180px; background:#3B5998; padding:0; list-style:none;
}
ul li { font-size:20px; cursor:pointer; width:60px; margin:0; padding:12px 0; text-align:center; float:left; display:block; height:22px;}
ul li:hover {color:rgba(0,0,0,.5);}
ul:after { content:''; display:block; position:absolute; left:0; right:0; margin:35px auto; height:0; width:0; border-left: 20px solid transparent;	border-right: 20px solid transparent;	border-top: 20px solid #3B5998;
}
li[class*="twitter"] {background:#6CDFEA;padding:12px 0;}
li[class*="gplus"] {background:#E34429;padding:12px 0;}
Awesome CSS Footer Social Buttons - Script Codes
Awesome CSS Footer Social Buttons - Script Codes
Home Page Home
Developer Faizan Asad
Username faizanasad
Uploaded July 04, 2022
Rating 3
Size 2,179 Kb
Views 48,576
Do you need developer help for Awesome CSS Footer Social Buttons?

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!

Faizan Asad (faizanasad) Script Codes
Name
Google Style Footer
Amazing animated CSS Ghost Button
Stunning CSS3 Pagination
Blogger email sign up form
A Pen by Faizan Asad
Envato
Windows 8 Metro
Blogger signup email form
Facebook nav
Awesome HTML5 Contact Form
Create amazing captions with AI!

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!