How to create Cool Neumorphic Buttons with HTML and CSS

Nils 0 Comments
Are you looking for something new in web development? then this is right place for you. Here you will find pure HTML & CSS examples, powerful designs,templates and tutorials. Today we will see how to create amazing button click effect.

This is a tutorial on How to create Neumorphic Buttons with HTML and CSS only.
Neumorphic Buttons with HTML and CSS only
What is Neumorphism?
Neumorphism is very popular Designing trend and it is Soft UI and combination of flat design and smooth shadows. By adding multiple box shadows for lighting and shadow effects, it creates an Neumorphic effect that looks very smooth and cool.
Buttons have various jobs such as, submitting, accepting, sending. It is the entryway to another page, transaction or message. So making your site’s buttons cool and attractive with some Effect which provides better User experience and attract user.

In this tutorial we will see How to create cool Neumorphic Buttons UI with HTML-CSS. For this UI button we will make drop Shadow for initial state And Inset Shadow when we hover or click button. We can make different variations of neumorphic effect such as Flat, Convex, Concave.

You can also use neumorphic generater tool for your designs. Lots of css generater tools are available on the Internet. You can also see our this post: Best Online Tools for CSS designing.

Neumorphism is cool neumorphic designer tool will help you to create awesome neumorphic effects for your website. This is absolutely free tool that you must have to try.

To create a button effect, in HTML/CSS, there are three states to make your button alive...
  • : hover which is triggered by having your cursor over the button.
  • : focus which is triggered when you give focus to the button using your keyboard or by clicking it. For some browsers, the focus is given when you press your mouse button down. For others, it’s when you release it.
  • : active which is triggered from the moment you press your mouse button down to when you release it.

In this tutorial, we will add effect on active state, so when user will click button, then button effect will change. Applying different colors, shadows, sizes and changing position with those 3 states you can make your website interface cool and alive.

Html css Neumorphic Buttons effect
To get this code simply copy code from snippet. With this code, you can easily customise your website with less typing. 

HTML 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Cool Neumorphic Buttons</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <div>
    <div class="container">
      <button class="button button-1">Click Me</button>
      <button class="button button-2">Click Me</button>
    </div>
  </div>
  <!-- partial -->

</body>

</html>


CSS 


body {
  background: #f0f6f6;
}

.container {
  max-width: 24rem;
  margin: 4rem auto;
  padding: 4rem;
  background: #f0f6f6;
  border-radius: 1rem;
}

.button {
  color: #ff8d00;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 1px;
  text-shadow: .5px .5px .5px rgba(255, 255, 255, 1), -.5px -.5px 1px rgba(0, 0, 0, 0.2);
  border-radius: 0.75rem;
  margin: 1rem;
}

.button-1 {
  border: none;
  padding: 0.8rem 2rem;
  box-shadow: 6px 6px 6px 3px #e0e6e6, /* bottom-right */
  -5px -5px 6px 2px #fff, /* top-left */
  inset 3px 3px 4px -1px #f0f6f6, inset 10px 10px 14px 1px #e0e6e6, /* inside top-left */
  inset -10px -10px 10px 1px #fff;
  /* inside bottom-right */
  border-radius: 0.75rem;
}

.button-1:active {
  border: none;
  padding: 0.75rem 2rem;
  box-shadow: 4px 4px 6px 3px #e0e6e6, inset -1px -1px 2px 1px #fff, -2px -2px 6px 2px #fff, inset -6px -6px 6px 6px #e0e6e6, inset 1px 1px 2px 1px #e0e6e6;
  border-radius: 0.75rem;
}

.button-2:active {
  border: none;
  padding: 0.8rem 1.8rem 0.8rem 2.2rem;
  box-shadow: 6px 6px 8px 3px #ece9e9, -5px -5px 8px 2px #fff, inset 3px 3px 4px -1px #fff, inset 10px 10px 10px 2px #e0e6e6, /* inside top-left */
  inset -10px -10px 10px 1px #fff;
  /* inside bottom-right */
  border-radius: 0.75rem;
}

.button-2 {
  border: none;
  padding: 0.75rem 2rem;
  box-shadow: 4px 4px 6px 3px #e0e6e6, inset -1px -1px 2px 1px #fff, -2px -2px 6px 2px #fff, inset -6px -6px 6px 6px #e0e6e6, inset 1px 1px 2px 1px #e0e6e6;
  border-radius: 0.75rem;
}

.button:hover {
  cursor: pointer;
}

.button:active, .button:focus {
  outline: none;
}

Conclusion:

That’s it! You can now easily create Neumorphic effect for any component. If you have any doubts, you can comment down below.
Thanks For Visiting, Keep Visiting...

Tags

Post a Comment

Post a Comment

Previous Post Next Post