Learn how to create a modern UI with neumorphic button using HTML and CSS in this step-by-step guide. Improve user experience with neumorphic design in your UI.
Table of Contents
Welcome to our tutorial on creating a modern UI with a neumorphic button using HTML and CSS. Neumorphism is a design trend that has taken the world of UI design by storm. It is a new approach to creating user interfaces that combines the best of flat design and skeuomorphism. Neumorphic button are one of the most popular applications of this design trend, and for good reason. These buttons are visually stunning and provide a unique user experience.
In this tutorial, we will walk you through the process of creating neumorphic button using HTML and CSS. We will cover everything from the basics of neumorphism to advanced techniques for creating button that stand out. Whether you are a beginner or an experienced developer, this tutorial will provide you with the knowledge and skills you need to create modern UI with neumorphic button.
Watch full tutorial on my YouTube Channel: Watch Here.
Let's start making an amazing neumorphic button using HTML, and CSS step by step.
Join My Telegram Channel to Download the More Project: Click Here
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our neumorphic button.
The button is created using a div element with the class "btn" and contains a p element with the text "Click Me!". The webpage also includes a head section that specifies the language, character set, and viewport for the webpage, as well as a title for the webpage and a link to a separate CSS file called "styles.css" that is used to style the button. The !DOCTYPE declaration specifies that this is an HTML5 document.
After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Step 2 (CSS Code):
Once the basic HTML structure of the website is in place, the next step is to add styling to the neumorphic button using CSS. CSS allows us to control the visual appearance of the button, including things like layout, color, and size.
This is a CSS code snippet that styles the button and the text within it.
The first rule applies styles to the entire body element, setting the minimum height to 100% of the viewport, aligning the content in the center, and specifying a font-family.
The .btn class is used to style the button element. It sets the width, height, color, background color, and border-radius of the button. The display, justify-content, and align-items properties are used to center the text within the button. The cursor property is set to "pointer" to indicate that the button is clickable. The transition property is used to add a smooth animation when the button is hovered over or clicked. The box-shadow property is used to add a drop shadow to the button with inset shadows on the inside and outside of the button.
The p element within the button is styled to have a font-size of 1.6rem.
The .btn:active class is used to apply styles when the button is clicked. It changes the box-shadow of the button.
The .btn:hover class is used to apply styles when the mouse hovers over the button. It changes the text color to black.
This will give our button an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
.btn{
width: 15rem;
height: 4rem;
color: #E4EBF5;
background: #6d5bfc;
border-radius: 1rem;
display:flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.3s ease;
box-shadow: inset 0.2rem 0.2rem 1rem #8abdff, inset -0.2rem -0.2rem 1rem #5b0eeb, 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;
}
p{
font-size: 1.6rem;
}
.btn:active{
box-shadow: inset 0.2rem 0.2rem 1rem #5b0eeb, inset -0.2rem -0.2rem 1rem #8abdff;
}
.btn:hover{
color: #000;
} Final Output:
Conclusion:
In this blog post, we have explored neumorphic design and its benefits for UI design. We have also provided a step-by-step guide to create a neumorphic button using HTML and CSS. By following this guide, you can enhance the user experience of your UI and make it more intuitive and engaging.
The HTML code creates the button element and includes a link to the CSS stylesheet. The CSS code uses various properties such as width, height, color, background color, border-radius, font-size, and box-shadow to style the button and give it a neumorphic look. It also uses pseudo-classes such as :hover and :active to add interactivity to the button, such as changing the text color and box-shadow when the button is hovered over or clicked. Overall, this code demonstrates how to create an attractive and functional neumorphic button using HTML and CSS. We hope this guide has been helpful and inspiring for your next UI design project.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
