Hello reaaders, Today in this blog you’ll learn about "Neumorphism Design" and how can create Dark Neumorphism Toggle Social Icons by using Html and CSS. Here i have used a little bit Jquery code also for make it as a toggle click button and used CSS's Advanced Box-Shadow property for make it as 3d/ like neumorphism design. I hope you'll like this blog.

Watch Tutorial of Create Dark Neumorphism Toggle Social Icons using HTML CSS & Jquery

What is Neumorphism Design

“Neumorphism” is a new slang term in design circles — co-created by. — which essentially crosses the words “new” and “skeuomorphism”. Essentially, it's a new, minimal way to design with a soft, extruded plastic look. It's almost as if the interface has been vacuum-formed.

Now with this video, I'm sure you have understood the basics behind creating this program for those of you still finding it difficult I'll be linking the source code in the description for you.

HTML CODE:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
      <title>How To Create Dark Neumorphism Toggle Social Icons using HTML CSS & Jquery</title>
  </head>
  <body>
      <div class="icon">
          <li><a href="#"><span class="fab fa-facebook"></span></a></li>
          <li><a href="#"><span class="fab fa-twitter"></span></a></li>
          <li><a href="#"><span class="fab fa-instagram"></span></a></li>
          <li><a href="#"><span class="fab fa-github"></span></a></li>
          <li><a href="#"><span class="fab fa-youtube"></span></a></li>
      </div>

  <!-- Jquery code here -->
      <script type="text/javascript">
          $('.icon li').click(function(){
              $(this).toggleClass("active");
              $('.icon li a').toggleClass("active");
          })
      </script>
  </body>
  </html>

CSS CODE:

  *{
      margin: 0;
      padding: 0;
  }
  body{
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      min-height: 100vh;
      background: #091921;
  }
  .icon li{
      position: relative;
      list-style: none;
      display: inline-flex;
      margin: 0 10px;
      height: 70px;
      width: 70px;
      cursor: pointer;
      background: #091921;
      border-radius: 50%;
      box-shadow: -1px -1px 3px rgba(255,255,255,0.1),
                   2px 2px 6px rgba(0,0,0,.8) 
  }
  .icon li.active:before{
      position: absolute;
      content: '';
      width: 55px;
      height: 55px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      cursor: pointer;
      background: #091921;
      border-radius: 50%;
      box-shadow: inset -1px -1px 3px rgba(255,255,255,0.1),
                  inset 2px 2px 6px rgba(0,0,0,.8);
  }
  .icon li a{
      width: 100%;
      font-size: 27px;
      color: #b6bbc5;
      bottom: 22px;
      position: absolute;
      z-index: 2;
  }
  .icon li.active a .fa-facebook{
      color: #0640FD;
      font-size: 25px;
  }
  .icon li.active a .fa-twitter{
      color: #06D7FD;
      font-size: 25px;
  }
  .icon li.active a .fa-instagram{
      color: #FF005A;
      font-size: 25px;
  }
  .icon li.active a .fa-github{
      color: #EEFD06;
      font-size: 25px;
  }
  .icon li.active a .fa-youtube{
      color: #FC0202;
      font-size: 25px;
  }

Note : This given Download button link may contains some ads link. So, you may be clicked many times for downloading the source code files.

How To Create Dark Neumorphism Toggle Social Icons using HTML CSS & Jquery

Watch Tutorial of Create Dark Neumorphism Toggle Social Icons using HTML CSS & Jquery

What is Neumorphism Design

Post a Comment

Post a Comment

How To Create Responsive Navigation Menu Bar With Search Box Using Html And CSS - WebKitCoding