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 07 October 2021, Thursday.

How do I make an scss social icons flat?
  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
SCSS Social Icons Flat Previews

SCSS Social Icons Flat 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 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 JS Codes

// Demo Only
$("a").bind('click', function(event){
  event.preventDefault();
})
Do you want hide your ip address?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.