SCSS Social Icons Flat

Developer
Matt Litherland
Size
3,482 Kb
Views
36,432
  1. SCSS Social Icons Flat Previews
  2. SCSS Social Icons Flat HTML Codes
  3. SCSS Social Icons Flat CSS Codes
  4. SCSS Social Icons Flat JS Codes

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,432
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
Node Waves
Smooth Anchor Scrolling
Better Bootstrap Buttons
Cool Hidden Drawer
Responsive Flat UI Kit
Animated CSS3 Mobile Phone
Animated SVG Path
Vertical Align Images - Explained
Share Your Profile
Responsive Flot Chart
Create amazing sales emails 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!