SCSS Social Icons Flat

Developer
Matt Litherland
Size
3,482 Kb
Views
36,414

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 Previews
IQ Test

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();
})
SCSS Social Icons Flat - Script Codes
SCSS Social Icons Flat - Script Codes
Home Page Home
Developer Matt Litherland
Username mattsince87
Uploaded August 03, 2022
Rating 4.5
Size 3,482 Kb
Views 36,414
Do you need developer help for SCSS Social Icons Flat?

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!

Matt Litherland (mattsince87) Script Codes
Name
Animated CSS3 Mobile Phone
Animated Resposnive SVG Path
Google Inspired CSS Preloader
Cool Hidden Drawer
Node Waves
Animated SVG Path
Subtle CSS3 Heart Beat
Ultimate Pop-Out Menu
Slick Two Part Form
Flat Origami Article
Create amazing blog posts 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!