Neumorphic Social Media Buttons

Neumorphic Buttons In HTML

Learn how to create neumorphic social media buttons using CSS

In this tutorial you are going to learn how to make neumorphic social media buttons in html using css. Go to the end of this tutorial for the demo in codepen.

What is Neumorphism?

Neumorphism is a play on words based on New + Skeuomorphism. It's an UI trend that came to prominence this year and was named and analysed by Michal Malewicz from HYPE4. It's a visual style using inner and outer shadows to create an illusion of a soft, extruded shapes.

Lets Start

So before we start we need the social media icons to be placed on to the buttons. For that there are many ways, but I like to use font-awesome because it is very easy. To include it in our project we have to put the following code into the <head> section of the html file:
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css'>

The HTML code

<div class="container">
  <a href="https://www.facebook.com/codingandstuff/" target="_blank" class="fb">
    <i class="fab fa-facebook-f fa-lg middle"></i>
  </a>
  <a href="https://www.youtube.com/channel/UCZvsBQB7yXx-jDPNCPrVCoQ" target="_blank" class="yt">
    <i class="fab fa-youtube fa-lg middle"></i>
  </a>
  <a href="https://codepen.io/codingandstuff" target="_blank" class="cp">
    <i class="fab fa-codepen fa-lg middle"></i>
  </a>
  <a href="https://coding-and-stuff.blogspot.com/" target="_blank" class="bg">
    <i class="fab fa-blogger-b fa-lg middle"></i>
  </a>
</div>
In this, the code in the <i></i> section is the font-awesome code for the respective icons.
The next step is where the neumorphism comes to place by CSS code

The CSS code

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #242424;
}
a {
  display:block;
  float:left;
  margin: 10px;
  text-decoration: none;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 60px;
  color: #0088ff;
  background: #242424;
  box-shadow: 5px 5px 10px #0e0e0e, -5px -5px 10px #3a3a3a;
}
a:hover {
  background: #242424;
  box-shadow: 5px 5px 10px #0e0e0e, -5px -5px 10px #3a3a3a,
    inset -5px -5px 10px #0e0e0e, inset 5px 5px 10px #3a3a3a;
}
a:active {
  background: #242424;
  box-shadow: 5px 5px 10px #0e0e0e, -5px -5px 10px #3a3a3a,
    inset 5px 5px 10px #0e0e0e, inset -5px -5px 10px #3a3a3a;
}
.middle {
  vertical-align: middle;
}
.fb:hover{
  color:#1877f2;
}
.cp:hover{
  color:#fff;
}
.yt:hover{
  color:#ff0000;
}
.bg:hover{
  color:#fb8f3d;
}
In this we used box-shadow property to create the neumorphic effect and the pseudo classes :hover and :active for different button states.

Demo

DONE

Thank you for following till the end. Ask questions in the comments section.

Comments

Post a Comment