Nice social button
How do I make an nice social button?
What is a nice social button? How do you make a nice social button? This script and codes were developed by Eddy on 27 August 2022, Saturday.
Nice social button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nice social button</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" /> <div class="textwidget"> <ul class="social-icons large"> <li class="twitter"> <a href="http://www.twitter.com" target="_blank"> <i class="fa-twitter"></i> <i class="fa-twitter"></i> </a> </li> <li class="facebook"> <a href="https://www.facebook.com" target="_blank"> <i class="fa-facebook"></i> <i class="fa-facebook"></i> </a> </li> <li class="youtube"> <a href="http://www.youtube.com" target="_blank"> <i class="fa-youtube"></i> <i class="fa-youtube"></i> </a> </li> <li class="googleplus"> <a href="https://plus.google.com" target="_blank"> <i class="fa-google-plus"></i> <i class="fa-google-plus"></i> </a> </li> </ul> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Nice social button - Script Codes CSS Codes
body { background: #252525;
}
*,
*:before,
*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.social-icons.large { height: auto; overflow: hidden; list-style: none!important;
}
.social-icons.large li { float: left; display: inline-block; height: 50px;
}
.social-icons.large li a { display: inline-block; overflow: hidden; position: relative; text-align: center; transition: all 0.35s; color: #ccc; outline: none!important; transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; text-decoration: none; padding: 14px; width: 50px; height: 50px; line-height: 50px; font-size: 24px;
}
.social-icons.large li a:hover i { top: -52px;
}
.social-icons.large .twitter a:hover { color: #fff; background-color: #00aced;
}
.social-icons.large .facebook a:hover { color: #fff; background-color: #3b5998;
}
.social-icons.large .youtube a:hover { color: #fff; background-color: #bb0000;
}
.social-icons.large .googleplus a:hover { color: #fff; background-color: #dd4b39;
}
.social-icons.large .fa,
.social-icons.large [class^="fa-"] { display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; height: 100%; position: relative; top: 0%; transition: top 0.35s; width: 100%; margin-bottom: 31px;
}
.social-icons.large .fa-twitter:before { content: "\f099";
}
.social-icons.large .fa-facebook:before { content: "\f09a";
}
.social-icons.large .fa-youtube:before { content: "\f167";
}
.social-icons.large .fa-google-plus:before { content: "\f0d5";
}
Developer | Eddy |
Username | emnbdx |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 2,871 Kb |
Views | 24,288 |
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 |
Tip joke | 1,780 Kb |
Animation | 1,558 Kb |
A Pen by Eddy | 1,275 Kb |
Instructables homeslide | 4,345 Kb |
HA AAP - help part | 2,826 Kb |
Infinite horizontal slider | 2,009 Kb |
Sticky test | 1,827 Kb |
LBCA - tile test | 3,496 Kb |
HA - proto notif | 2,781 Kb |
Home color | 1,475 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 |
A Pen by panstable | Panstable | 2,940 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
Clock with full screen background | Owebboy | 2,415 Kb |
Simple Weather App | Cmwebby | 0 Kb |
Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
Carousel Test | Sbirchall | 1,509 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
Css3 slide | Nakome | 3,190 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!