SCSS Social Icons Flat
How do I make an scss social icons flat?
Some social icons with hover and active states using SCSS. What is a scss social icons flat? How do you make a scss social icons flat? This script and codes were developed by Matt Litherland on 03 August 2022, Wednesday.
SCSS Social Icons Flat - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SCSS Social Icons Flat</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="icons"> <a href="#" class="zocial-facebook"></a> <a href="#" class="zocial-twitter"></a> <a href="#" class="zocial-googleplus"></a> <a href="#" class="zocial-vimeo"></a> <a href="#" class="zocial-spotify"></a> <a href="#" class="zocial-dribbble"></a> <a href="#" class="zocial-soundcloud"></a> <a href="#" class="zocial-skype"></a> <a href="#" class="zocial-youtube"></a> <a href="#" class="zocial-steam"></a> <a href="#" class="zocial-pinterest"></a> <a href="#" class="zocial-linkedin"></a> <a href="#" class="zocial-yahoo"></a> <a href="#" class="zocial-smashing"></a>
</div>
<p>Follow me on twitter @mattsince87</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
SCSS Social Icons Flat - Script Codes CSS Codes
@import url(http://weloveiconfonts.com/api/?family=zocial);
[class*="zocial-"]:before { font-family: 'zocial', sans-serif;
}
body, html { width: 100%; font-size: 16px; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
p { font-size: 0.75em; opacity: 0.35;
}
#icons { display: block; width: 500px; max-width: 100%; min-width: 300px; text-align: center; margin: 40px auto;
}
a { display: inline-block; margin: 40px 5px 0 5px; width: 48px; height: 48px; text-align: center; background: #ff0000; line-height: 48px; font-size: 16px; text-decoration: none; color: #fff; -webkit-transition: all 0.2s ease-in-out;
}
a:nth-child(1) { background: #3c689f; background: -webkit-linear-gradient(#3c689f, #5181bd); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #2e507a;
}
a:nth-child(2) { background: #3b89b1; background: -webkit-linear-gradient(#3b89b1, #58a1c7); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #2e6b8b;
}
a:nth-child(3) { background: #d16847; background: -webkit-linear-gradient(#d16847, #db8970); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #b74f2e;
}
a:nth-child(4) { background: #3580c5; background: -webkit-linear-gradient(#3580c5, #5a99d3); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #2a669d;
}
a:nth-child(5) { background: #5ea240; background: -webkit-linear-gradient(#5ea240, #77bd58); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #497d32;
}
a:nth-child(6) { background: #d14788; background: -webkit-linear-gradient(#d14788, #db70a2); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #b72e6f;
}
a:nth-child(7) { background: #e89b49; background: -webkit-linear-gradient(#e89b49, #eeb476); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #e2821c;
}
a:nth-child(8) { background: #369cc6; background: -webkit-linear-gradient(#369cc6, #5cb0d3); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #2b7c9e;
}
a:nth-child(9) { background: #d14747; background: -webkit-linear-gradient(#d14747, #db7070); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #b72e2e;
}
a:nth-child(10) { background: #444444; background: -webkit-linear-gradient(#444444, #5e5e5e); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #2b2b2b;
}
a:nth-child(11) { background: #dc3d5f; background: -webkit-linear-gradient(#dc3d5f, #e46883); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #c32345;
}
a:nth-child(12) { background: #558ec9; background: -webkit-linear-gradient(#558ec9, #7ca8d5); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #3974b2;
}
a:nth-child(13) { background: #743c9f; background: -webkit-linear-gradient(#743c9f, #8e51bd); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #592e7a;
}
a:nth-child(14) { background: #dc5334; background: -webkit-linear-gradient(#dc5334, #e47860); background-size: 1px 200px; box-shadow: inset 0 -2px 0 #bd3d21;
}
a:hover { background-position: 100px; -webkit-transition: all 0.2s ease-in-out; -webkit-transform: translate3d(0, -2px, 0);
}
a:active { -webkit-transition: all 0.2s ease-in-out; -webkit-transform: translate3d(0, 0, 0);
}
SCSS Social Icons Flat - Script Codes JS Codes
// Demo Only
$("a").bind('click', function(event){ event.preventDefault();
})
Developer | Matt Litherland |
Username | mattsince87 |
Uploaded | August 03, 2022 |
Rating | 4.5 |
Size | 3,482 Kb |
Views | 36,432 |
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 |
Node Waves | 3,216 Kb |
Smooth Anchor Scrolling | 4,508 Kb |
Better Bootstrap Buttons | 2,955 Kb |
Cool Hidden Drawer | 4,754 Kb |
Responsive Flat UI Kit | 17,612 Kb |
Animated CSS3 Mobile Phone | 4,609 Kb |
Animated SVG Path | 3,853 Kb |
Vertical Align Images - Explained | 4,610 Kb |
Share Your Profile | 3,387 Kb |
Responsive Flot Chart | 3,554 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 |
Slide In Panel | Vikvarg | 2,811 Kb |
Simple canvas drawing -- simplified lines | Anandthakker | 3,127 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
Resizable SASS Icons | Marianarlt | 7,611 Kb |
Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
Css color for svg | Ademilter | 2,392 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
C.Rowe Button | Brownerd | 2,473 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 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!