Neumorphism Button Design Using HTML & CSS

Neumorphism Button Design Using HTML & CSS

Here you will learn how to create Neumorphism Button using CSS. Neumorphism is a simple UI design that is easy to make and very interesting to look at. Here I have shown how to create Neumorphism Button using HTML and CSS.

I have shared many designs of buttons before using CSS. However, this design is very simple but interesting. Here I have used the hover effect in Neumorphism Button.

Below is a preview box. Which will help you to know how to create CSS Neumorphism Button.


See the Pen Neumorphism Button Design end hover 360 rotate by Shantanu Jana (@shantanu-jana) on CodePen.

Below I have shared all the code to create these CSS buttons. Like I said HTML and CSS are used here. So you create an HTML and CSS file.


HTML Code:

The following code is the HTML code that has been used to create this Neumorphism Social Button. 4 buttons have been created here.


<div class="wrapper">

  <div class="box">
    <i class="fa fa-facebook" aria-hidden="true"></i>
  </div>

  <div class="box">
    <i class="fa fa-instagram" aria-hidden="true"></i>
  </div>

  <div class="box">
    <i class="fa fa-envelope" aria-hidden="true"></i>
  </div>

  <div class="box">
    <i class="fa fa-codepen" aria-hidden="true"></i>
  </div>

</div>

CSS Code:

Now, this Neumorphism Button has been designed by CSS. First I designed this button and converted it to a Neumorphism design. Then I added the hove effect between the buttons here.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  background: #dde1e7;
  flex-direction: row;
  padding: 30px;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #dde1e7;
  border-radius: 50%;
  margin: 0 10px;
  height: 100vh;
  width: 200px;
  height: 200px;
  box-shadow: -3px -3px 7px #fff, 3px 3px 5px rgba(94, 104, 121, 0.712);
  position: relative;
}
.box:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: transparent;
  width: 80%;
  height: 80%;
  box-shadow: inset -3px -3px 7px #fff,
    inset 3px 3px 5px rgba(94, 104, 121, 0.712);
}

.box:hover:after {
  box-shadow: -3px -3px 7px #fff,
            3px 3px 5px rgba(94, 104, 121, 0.712);
}

.box i {
  cursor: pointer;
  background: #dde1e7;
  font-size: 50px;
  text-shadow: -3px -3px 7px #fff,
            3px 3px 5px rgba(94, 104, 121, 0.712);
  transition: 1s ease;
}
.box:hover i {
  color: dodgerblue;
  transform: rotate(360deg);
}

Please comment on how you like this Simple Neumorphism Button CSS. If you have trouble using the code above, use the download button below.






Comments

Post a Comment

Tell me what you think ??😎