Learn how to create a layered effect button using HTML and CSS with step-by-step instructions. Add stylish hover and active effects to your buttons.
Table of Contents
Creating interactive and visually appealing buttons can significantly improve the user experience of your website. In this tutorial, we'll show you how to create a layered effect button using HTML and CSS. This button will have a modern design with a smooth hover effect, making it look like it has multiple layers of shadows.
Prerequisites:
Before we start, make sure you have the following:
- Basic knowledge of HTML and CSS.
- A text editor like VS Code or Sublime Text.
- A browser to preview your work.
If you're new to web development, don't worry! We'll guide you step by step through the process.
Source Code
Step 1 (HTML Code):
Start by creating a new HTML file (e.g., index.html). Add the basic HTML structure with a button inside a div element. Here's a breakdown of the code:
1. DOCTYPE Declaration:
<!DOCTYPE html>This line declares the document type as HTML5, which ensures that the page is rendered correctly in modern web browsers.
2. HTML Tag:
<html lang="en">The <html> tag is the root element of the HTML document. The lang="en" attribute specifies that the document is in English.
3. Head Section:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layered Effect Button</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="styles.css">
</head>- The
<meta charset="UTF-8">tag ensures the document uses the UTF-8 character encoding, supporting a wide range of characters. - The
<meta name="viewport" content="width=device-width, initial-scale=1.0">tag ensures the page is responsive and adjusts to different screen sizes. - The
<title>tag sets the title of the webpage that appears in the browser tab. - The first
<link>tag imports the "Poppins" font from Google Fonts for use in the webpage. - The second
<link>tag links to an external CSS file (styles.css) that will define the styles for the page, including the layered effect for the button.
4. Body Section:
<body>
<div class="layered-box">
<button>Click Me</button>
</div>
</body>- The
<body>tag contains the content of the webpage. - Inside the body, there is a
<div>with the classlayered-box. Thisdivis styled in the externalstyles.cssfile to apply the layered effect. - Inside the
div, there is a<button>element with the text "Click Me." This button will be styled with the layered effect defined in the CSS file.
Step 2 (CSS Code):
Next, let's move on to styling the button. Below is a detailed explanation of each part:
1. Universal Selector:
*{
margin: 0;
padding: 0;
}- The
*selector targets all elements on the page. margin: 0;andpadding: 0;remove the default margin and padding applied by the browser, ensuring a clean slate for styling.
2. Body Styling:
body {
font-family: 'Poppins', sans-serif;
background-color: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}font-family: 'Poppins', sans-serif;sets the font for the entire body to "Poppins" (a Google font), with a fallback to the generic sans-serif font.background-color: #f0f4f8;gives the background a light grayish-blue color.display: flex;sets the body to use Flexbox layout, which allows easy alignment of child elements.justify-content: center;andalign-items: center;center the content both horizontally and vertically.height: 100vh;ensures the body takes up the full height of the viewport (100% of the visible screen height).
3. Layered Box Button Styling:
.layered-box button {
font-family: 'Poppins', sans-serif;
padding: 10px 20px;
font-size: 14px;
color: #ffffff;
background-color: #825cff;
border: none;
cursor: pointer;
transition: all 0.7s ease-in-out;
}.layered-box buttontargets the button inside adivwith the classlayered-box.font-family: 'Poppins', sans-serif;applies the "Poppins" font to the button text.padding: 10px 20px;adds padding inside the button to make it larger and more clickable (10px top/bottom, 20px left/right).font-size: 14px;sets the font size of the button text.color: #ffffff;sets the text color to white.background-color: #825cff;gives the button a purple background color.border: none;removes any default border from the button.cursor: pointer;changes the mouse cursor to a pointer when hovering over the button, indicating it's clickable.transition: all 0.7s ease-in-out;adds a smooth transition effect for all changes (such as hover effects), lasting 0.7 seconds with an easing function.
4. Button Hover Effect:
.layered-box button:hover {
background-color: #6a3dff;
box-shadow:
#6a3dff 1px 1px 4px,
#ffffff 3px 3px,
#6a3dff 3px 3px 0px 1px,
#6a3dff 4px 4px 1px,
#ffffff 6px 6px,
#6a3dff 6px 6px 0px 1px,
#6a3dff 7px 7px 4px;
}.layered-box button:hoverapplies styles when the button is hovered over.background-color: #6a3dff;changes the button's background color to a lighter purple on hover.box-shadowcreates a multi-layered shadow effect around the button, using multiple layers of shadows with different offsets and blur radius. This gives the button a 3D or layered look when hovered.
5. Button Active State:
.layered-box button:active{
box-shadow: none;
scale: 0.95;
}.layered-box button:activeapplies styles when the button is clicked (active state).box-shadow: none;removes the shadow effect when the button is clicked.scale: 0.95;slightly shrinks the button to 95% of its original size, creating a "press" effect.
*{
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.layered-box button {
font-family: 'Poppins', sans-serif;
padding: 10px 20px;
font-size: 14px;
color: #ffffff;
background-color: #825cff;
border: none;
cursor: pointer;
transition: all 0.7s ease-in-out;
}
.layered-box button:hover {
background-color: #6a3dff;
box-shadow:
#6a3dff 1px 1px 4px,
#ffffff 3px 3px,
#6a3dff 3px 3px 0px 1px,
#6a3dff 4px 4px 1px,
#ffffff 6px 6px,
#6a3dff 6px 6px 0px 1px,
#6a3dff 7px 7px 4px;
}
.layered-box button:active{
box-shadow: none;
scale: 0.95;
} Final Output:
Conclusion:
In this tutorial, we've shown you how to create a layered effect button using HTML and CSS. By following the steps, you can easily add a stylish button to your website that reacts to user interactions.
You can customize the button's colors, size, and shadow effects to match your website's design. Experiment with different CSS properties to create unique effects and make your website more engaging for users.
Start using this layered effect button in your web projects and enhance the user experience with interactive, visually appealing buttons!
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 😊
