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 ??😎

Popular posts from this blog

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code:...
Read more

How to Create A Custom Select Box using HTML CSS

Image
In this article, you will learn how to create Custom Select Box using HTML CSS, and JavaScript. custom select dropdown we use in many places. This is a kind of dropdown menu . However, it is much more modern than the general dropdown menu.  This type of HTML custom Select Box has a small box. Clicking on which will bring up a dropdown. There are many options in that dropdown . The option that you select will be found in that box. If you click on that box again, you will see the options again.  If you select any other option, in the same way, that option will also be seen in that custom select box . If you have a basic idea about HTML and CSS , you can easily create it.  Custom Select Box CSS Here I have used a small amount of jquery. But if you do not know jquery then there will be no problem. Because very little JavaScript has been used here. Below is a demo that will help you learn how this HTML CSS custom select dropdown works. See the Pen HTML CSS Custom ...
Read more

CSS Toggle Switch with Text & Animation (Free Code)

Image
If you want to make a CSS Toggle Switch with Text using HTML and CSS then this tutorial will help you. Here I have shown step by step how to make a CSS Toggle Switch .  Earlier I shared with you many more types of Toggle Button with Text Enhancement Tutorial. Those designs were a bit complicated. This project is relatively simple. If you are a beginner then this design will help you completely. Here I have used only HTML and CSS. This beautiful CSS Toggle Switch is made using one-line HTML and some amount of CSS. Toggle we use in different places. It is mainly used to turn on and off various options and to select any one of the many options. CSS Toggle Switch with Text Below is a demo that will help you learn how it works. Below you will find the required preview and source code. See the Pen Untitled by Ground Tutorial ( @groundtutorial ) on CodePen . As you can see above, a small area on the webpage has been created using input. Which contains a button. Normally t...
Read more