Social Icons

In this example below you will see how to do a Social Icons with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ebakernz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ebakernz ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Social Icons</title>
  
    <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>

  <h1>Social Icons</h1>
<div class="social-icons">
  <svg xmlns="http://www.w3.org/2000/svg" width="500" height="200" viewBox="0 0 500 200">
   <g class="youtube-icon-group">

         <circle class="youtube-outline" fill="transparent" stroke="#F26768" stroke-miterlimit="10" cx="250" cy="100.5" r="35.2"/>
         <circle class="youtube-inner-circle" fill="transparent" stroke="#F26768" stroke-miterlimit="10" cx="250" cy="100.5" r="35.2"/>

      <path class="youtube-icon" fill="#F26768" d="M264.7 94.6s-.3-2-1.2-3c-1-1.2-2.4-1.2-3-1.3-4.2-.3-10.5-.3-10.5-.3s-6.3 0-10.5.3c-.6 0-2 0-3 1.3-1 1-1.2 3-1.2 3s-.3 2.4-.3 4.8v2.2c0 2.4.3 4.8.3 4.8s.3 2 1.2 3c1 1.2 2.6 1.2 3.3 1.3 2.4.2 10.2.3 10.2.3s6.3 0 10.5-.3c.6 0 2 0 3-1.3 1-1 1.2-3 1.2-3s.3-2.4.3-4.8v-2.2c0-2.4-.3-4.8-.3-4.8zm-17.8 9.8V96l8 4.2-8 4.2z"/>

</g>


  <g class="twitter-icon-group">
  <circle class="twitter-outline" fill="none" stroke="#4099ff" stroke-miterlimit="10" cx="110.6" cy="100.5" r="35.2"/>

      <path fill="#4099ff" d="M125.4 91.8c-1 .5-2.3 1-3.5 1 1-.8 2-2 2-3.4-1 .7-2.6 1.2-4 1.5-1-2-2.6-2-4.4-2-3.3 0-6 2-6 6v1c-5-.6-9.4-3-12.4-6.7-.6 1-1 2-1 3 0 2 1.2 4 2.8 5-1 0-2-.2-2.6-.7 0 3 2 5.4 5 6l-1.8.2h-1c.6 2.2 3 4 5.5 4-2 1.6-4.6 2.6-7.5 2.6h-1c2.4 1.5 5.5 2.5 9 2.5 11 0 17.2-9.3 17.2-17.3 1.2-1 2.2-2 3-3.2z"/>

      <path class="twitter-icon" fill="transparent" stroke="transparent" d="M125.4 91.8c-1 .5-2.3 1-3.5 1 1-.8 2-2 2-3.4-1 .7-2.6 1.2-4 1.5-1-2-2.6-2-4.4-2-3.3 0-6 2-6 6v1c-5-.6-9.4-3-12.4-6.7-.6 1-1 2-1 3 0 2 1.2 4 2.8 5-1 0-2-.2-2.6-.7 0 3 2 5.4 5 6l-1.8.2h-1c.6 2.2 3 4 5.5 4-2 1.6-4.6 2.6-7.5 2.6h-1c2.4 1.5 5.5 2.5 9 2.5 11 0 17.2-9.3 17.2-17.3 1.2-1 2.2-2 3-3.2z"/>
    </g>

    <g class="facebook-icon-group">
      <circle class="facebook-outline" fill="none" stroke="#3b5998" stroke-miterlimit="10" cx="389.4" cy="100.5" r="35.2"/>
    <path  fill="#3b5998" d="M392 95.5v-3c0-1.3.2-2 2.2-2h2.7v-5h-4c-5 0-7 3.3-7 7v3h-4v5h4v15h6v-15h4l.2-5h-5z"/>

    <path class="facebook-detail" fill="#3b5998" d="M389.473 51.471c-.639 0-1.155.517-1.155 1.155v8.854c0 .639.517 1.156 1.155 1.156.639 0 1.155-.518 1.155-1.156v-8.854c0-.638-.517-1.155-1.155-1.155zM369.5 55.503c-.584.26-.846.942-.586 1.526l3.602 8.089c.26.583.941.845 1.525.585.583-.26.845-.942.586-1.525l-3.602-8.089c-.259-.583-.942-.845-1.525-.586zm-16.606 11.808c-.428.475-.39 1.205.085 1.633l6.58 5.924c.475.428 1.205.391 1.633-.085.427-.474.388-1.204-.086-1.632l-6.58-5.926c-.475-.426-1.206-.389-1.632.086zm-10.369 17.541c-.197.607.135 1.26.742 1.457l8.421 2.736c.606.197 1.259-.135 1.456-.742.197-.607-.135-1.258-.742-1.457l-8.421-2.736c-.607-.197-1.258.134-1.456.742zm-2.337 20.242c.066.635.636 1.096 1.271 1.028l8.806-.925c.634-.066 1.095-.635 1.028-1.271-.066-.633-.635-1.094-1.271-1.027l-8.806.926c-.634.066-1.094.634-1.028 1.269zm6.098 19.442c.319.552 1.027.743 1.579.423l7.668-4.428c.553-.318.742-1.023.423-1.579-.318-.552-1.024-.741-1.579-.421l-7.668 4.426c-.552.32-.741 1.025-.423 1.579zm13.48 15.28c.516.375 1.24.262 1.614-.256l5.204-7.163c.375-.515.262-1.237-.257-1.614-.515-.375-1.237-.261-1.613.258l-5.205 7.162c-.374.517-.26 1.238.257 1.613zm18.528 8.479c.624.132 1.239-.267 1.371-.891l1.841-8.662c.133-.621-.265-1.236-.892-1.369-.623-.133-1.236.266-1.369.891l-1.842 8.66c-.132.625.267 1.238.891 1.371zm20.375.209c.624-.135 1.024-.748.891-1.372l-1.842-8.661c-.131-.622-.744-1.021-1.371-.889-.623.133-1.021.746-.889 1.371l1.84 8.66c.134.625.747 1.023 1.371.891zm18.698-8.098c.516-.377.632-1.1.256-1.615l-5.205-7.162c-.373-.516-1.096-.631-1.614-.256-.515.375-.63 1.098-.254 1.615l5.203 7.162c.376.518 1.099.631 1.614.256zm13.789-15.002c.317-.555.129-1.262-.424-1.58l-7.668-4.426c-.551-.318-1.258-.131-1.579.424-.317.551-.129 1.258.425 1.578l7.667 4.427c.554.319 1.26.13 1.579-.423zm6.494-19.314c.064-.635-.395-1.204-1.029-1.27l-8.806-.926c-.632-.066-1.202.393-1.27 1.03-.066.632.394 1.202 1.03 1.269l8.804.926c.637.067 1.205-.393 1.271-1.029zm-1.922-20.285c-.199-.605-.85-.939-1.456-.741l-8.422 2.735c-.604.197-.938.848-.74 1.459.196.604.849.938 1.457.738l8.42-2.734c.607-.198.939-.85.741-1.457zm-10.008-17.75c-.429-.473-1.157-.513-1.631-.084l-6.581 5.924c-.472.426-.513 1.156-.084 1.634.426.472 1.157.513 1.632.083l6.58-5.924c.474-.428.512-1.159.084-1.633zm-16.362-12.144c-.584-.258-1.267.002-1.524.585l-3.603 8.09c-.258.58.002 1.266.588 1.525.581.26 1.266-.002 1.524-.588l3.602-8.086c.26-.583-.002-1.267-.587-1.526z"/>
    </g>
</svg>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ebakernz/social-icons-qjgdyr */
svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.twitter-outline,
.twitter-icon {
  transition: 300ms all;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.twitter-icon-group:hover .twitter-outline {
  -webkit-transform: scale(0);
          transform: scale(0);
}
.twitter-icon-group:hover .twitter-icon {
  -webkit-transform: scale(2);
          transform: scale(2);
  stroke: #4099ff;
  opacity: 0;
}

.youtube-outline,
.youtube-inner-circle,
.youtube-icon {
  transition: 300ms all;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.youtube-icon-group:hover .youtube-outline {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.youtube-icon-group:hover .youtube-inner-circle {
  fill: #f26768;
}
.youtube-icon-group:hover .youtube-icon {
  stroke: #fff;
}

.facebook-outline,
.facebook-detail {
  transition: 300ms all;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}

.facebook-detail {
  opacity: 0;
}

.facebook-icon-group:hover .facebook-outline {
  -webkit-transform: scale(1.8);
          transform: scale(1.8);
  opacity: 0;
}
.facebook-icon-group:hover .facebook-detail {
  opacity: 1;
  -webkit-transform: scale(0.8) rotate(180deg);
          transform: scale(0.8) rotate(180deg);
}

Comments