Learn the art of creating sleek neumorphic buttons in this comprehensive tutorial. Perfect for both beginners and seasoned developers.
.jpg "Creating Elegant Neumorphic Buttons using HTML and CSS (Source Code)")
Table of Contents
In the ever-evolving landscape of web design, neumorphism has emerged as a captivating fusion of flat design simplicity and skeuomorphic depth. Neumorphic buttons, in particular, represent a contemporary approach to UI elements, introducing subtle shadows and gradients to create an interface that feels both familiar and futuristic.
In this comprehensive tutorial, we will delve into the intricacies of neumorphic button design, exploring the seamless integration of HTML and CSS to bring your web projects to life. Whether you're a seasoned developer looking to stay on top of design trends or a newcomer eager to enhance your skills, this guide will provide step-by-step insights into crafting sophisticated and interactive neumorphic buttons. Let's embark on this journey to elevate your web design aesthetics with the magic of neumorphism.
Source Code
Step 1 (HTML Code):
Start by creating a basic HTML structure for your button. Use semantic HTML elements for accessibility and better structure. Let's break down the HTML code:
1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used. In this case, it's HTML5.
2. <html lang="en">: This tag marks the beginning of the HTML document. The "lang" attribute is set to "en," indicating that the document is written in English.
3. <head>: This section contains meta-information about the HTML document, such as the character set, viewport settings, and the title of the page.
- <meta charset="UTF-8">: Specifies the character encoding for the document, which is UTF-8 (Unicode).
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag is used for Internet Explorer compatibility and ensures that the latest version of the rendering engine is used.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Defines the viewport properties, enabling responsive design. It sets the initial scale to 1.0 and adjusts the width based on the device's width.
- <title>Neumorphic buttons</title>: Sets the title of the HTML document, which is displayed in the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: Links an external CSS (Cascading Style Sheets) file named "styles.css" to the HTML document. This file contains styles for the appearance of elements on the page.
4. <body>: This is the main content of the HTML document.
- <h1>Neumorphic buttons</h1>: Represents a top-level heading with the text "Neumorphic buttons."
- <div class="buttons">: Defines a container div with the class "buttons" to group the neumorphic buttons.
- <button class="neumorphic active">: Represents a button with the classes "neumorphic" and "active." It includes an icon (<i>) with a class indicating a light font-awesome icon (fa-light) and a specific icon (fa-fire). Additionally, there is a <span> element containing the text "Button 1."
- Similar button elements follow with different icons and text for Buttons 2 to 6.
Step 2 (CSS Code):
Apply foundational CSS styles to your button, setting the groundwork for the neumorphic effect. Let's break down the code:
1. @import:
- It imports the Font Awesome icon library (version 6.0.0-beta1) from the specified URL.
2. button.neumorphic:
- This selector targets a <button> element with the class "neumorphic".
3. Neumorphic Button Styles:
- container-type and aspect-ratio are custom properties setting the size and aspect ratio of the button.
- border, border-radius: Styling the border and border-radius of the button.
- color: Setting the text color.
- background: Making the background transparent.
- display: grid: Using CSS Grid for layout.
- place-content: Centering the content inside the button.
- gap: Specifying the gap between grid items.
- --shadow: Defining a custom property for the button's box shadow.
- box-shadow: Applying the box shadow using the custom property.
- outline: Removing the default button outline.
- transition: Adding a smooth transition effect on all properties over 0.1 seconds.
- &:hover, &:focus-visible: Applying styles when the button is hovered or focused.
- Changing text color and applying a scale transformation.
- &:active, &.active: Applying styles when the button is active or has the "active" class.
- Changing box shadow, text color, and adjusting the font sizes of child elements (<i> and <span>).
4. Child Elements Styles:
- > i: Styles for the <i> (icon) child element.
- > span: Styles for the <span> child element.
5. Body, Heading, and Container Styles:
- body: Setting the background color and padding for the entire body.
- h1: Centering the text, setting color, font family, and font size for <h1> elements.
- .buttons: Styles for a container with the class "buttons".
- Using CSS Grid for layout with responsive columns and specifying a maximum width.
@import url('https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css');
button.neumorphic {
container-type: inline-size;
aspect-ratio: 1/1;
border: 0.5rem solid transparent;
border-radius: 1rem;
color: hsl(0 0% 10%);
background: none;
display: grid;
place-content: center;
gap: 1rem;
--shadow:
-.5rem -.5rem 1rem hsl(0 0% 100% / .75),
.5rem .5rem 1rem hsl(0 0% 50% / .5);
box-shadow: var(--shadow);
outline: none;
transition: all 0.1s;
&:hover, &:focus-visible {
color: hsl(10 80% 50%);
scale: 1.1
}
&:active, &.active{
box-shadow:
var(--shadow),
inset .5rem .5rem 1rem hsl(0 0% 50% / .5),
inset -.5rem -.5rem 1rem hsl(0 0% 100% / .75);
color: hsl(10 80% 50%);
> i { font-size: 28cqi};
> span { font-size: 13cqi};
}
>i {
font-size: 31cqi;
}
> span {
font-family: system-ui, sans-serif;
font-size: 16cqi;
}
}
body {
background-color: #e5e9f4;
padding: 2rem;
}
h1 {
text-align: center;
color: hsl(0 0% 10%);
font-family: system-ui, sans-serif;
font-size: 3rem;
}
.buttons {
display: grid;
width: min(75rem, 100%);
margin-inline: auto;
grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
gap: 2rem;
} Final Output:
.gif "Creating Elegant Neumorphic Buttons using HTML and CSS (Source Code)")
Conclusion:
Congratulations! You've successfully created neumorphic buttons using HTML and CSS. Experiment with colors and styles to make them uniquely yours. Elevate your web design with this elegant and modern UI/UX element.
Code by: Mark Boots
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 😊
