Step-by-Step Guide to Making an Animated Mail Button with HTML and CSS
Welcome to Day 34 of my #100DaysOfCode Challenge! Today, I’m excited to share with you a fun and interactive project: an animated mail button using HTML and CSS. This step-by-step guide will walk you through the entire process, from setting up the HTML structure to styling with CSS and adding animations. By the end, you’ll have a visually appealing and interactive mail button that can be a great addition to any website.
You can download the full source code here. For any questions or feedback, feel free to contact me.
Step 1: Setting Up the HTML Structure
First, let’s create the basic HTML structure. This will include the envelope and the letter inside it. Here’s the code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character encoding for the document -->
<meta charset="UTF-8">
<!-- Ensures proper rendering and touch zooming on IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Sets the viewport to make the website responsive -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link to the external CSS stylesheet -->
<link rel="stylesheet" href="style.css">
<!-- Title of the webpage -->
<title>Animated Mail Button</title>
</head>
<body>
<!-- Container for the letter image -->
<div class="letter-image">
<!-- Main container for the animated mail -->
<div class="animated-mail">
<!-- Back fold of the envelope -->
<div class="back-fold"></div>
<!-- Container for the letter inside the envelope -->
<div class="letter">
<!-- Border of the letter -->
<div class="letter-border"></div>
<!-- Title section of the letter -->
<div class="letter-title"></div>
<!-- Context/body section of the letter -->
<div class="letter-context"></div>
<!-- Stamp on the letter -->
<div class="letter-stamp">
<!-- Inner part of the stamp -->
<div class="letter-stamp-inner"></div>
</div>
</div>
<!-- Top fold of the envelope -->
<div class="top-fold"></div>
<!-- Main body of the envelope -->
<div class="body"></div>
<!-- Left fold of the envelope -->
<div class="left-fold"></div>
</div>
<!-- Shadow effect for the envelope -->
<div class="shadow"></div>
</div>
</body>
</html>Explanation:
- Meta Tags: These tags ensure proper rendering and touch zooming, especially on mobile devices.
- Link to CSS: The
linktag connects the HTML to an external CSS file where we'll write our styles. - Main Container: The
divwith the classletter-imageholds all the elements of the animated mail button.
Step 2: Styling with CSS
Now, let’s style the HTML elements to create the envelope and the letter. Add the following CSS to your style.css file:
/* Sets the background color of the body */
body {
background-color: #f8dfca;
}
/* Container for the letter image, centering it within the page */
.letter-image {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
/* Centers the div */
cursor: pointer;
/* Changes cursor to pointer on hover */
}
/* Main container for the animated mail */
.animated-mail {
position: absolute;
height: 150px;
width: 200px;
transition: 0.4s;
/* Smooth transition for animation */
}
/* The body of the envelope */
.animated-mail .body {
position: absolute;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 100px 200px;
/* Creates the envelope shape */
border-color: transparent transparent #e95f55 transparent;
/* Colors the envelope */
z-index: 2;
/* Stacks this element above others */
}
/* The top fold of the envelope */
.animated-mail .top-fold {
position: absolute;
top: 50px;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 100px 0 100px;
/* Creates the triangular fold */
transform-origin: 50% 0%;
/* Sets the pivot point for transformations */
transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
/* Delayed transition for smooth animation */
border-color: #cf4a43 transparent transparent transparent;
/* Colors the fold */
z-index: 2;
/* Stacks this element above others */
}
/* The back fold of the envelope */
.animated-mail .back-fold {
position: absolute;
bottom: 0;
width: 200px;
height: 100px;
background: #cf4a43;
/* Colors the back fold */
z-index: 0;
/* Stacks this element below others */
}
/* The left fold of the envelope */
.animated-mail .left-fold {
position: absolute;
bottom: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 0 50px 100px;
/* Creates the triangular fold */
border-color: transparent transparent transparent #e15349;
/* Colors the fold */
z-index: 2;
/* Stacks this element above others */
}
/* The letter inside the envelope */
.animated-mail .letter {
position: absolute;
left: 20px;
bottom: 0;
width: 160px;
height: 60px;
background: white;
/* Colors the letter */
z-index: 1;
/* Stacks this element below others */
overflow: hidden;
/* Hides overflowing content */
transition: 0.4s 0.2s;
/* Delayed transition for smooth animation */
}
/* The border of the letter */
.animated-mail .letter .letter-border {
height: 10px;
width: 100%;
background: repeating-linear-gradient(-45deg, #cb5a5e, #cb5a5e 8px, transparent 8px, transparent 18px);
/* Creates a striped pattern */
}
/* The title section of the letter */
.animated-mail .letter .letter-title {
margin-top: 10px;
margin-left: 5px;
height: 10px;
width: 40%;
background: #cb5a5e;
/* Colors the title */
}
/* The context/body section of the letter */
.animated-mail .letter .letter-context {
margin-top: 10px;
margin-left: 5px;
height: 10px;
width: 20%;
background: #cb5a5e;
/* Colors the context */
}
/* The stamp on the letter */
.animated-mail .letter .letter-stamp {
margin-top: 30px;
margin-left: 120px;
border-radius: 100%;
/* Makes the stamp circular */
height: 30px;
width: 30px;
background: #cb5a5e;
/* Colors the stamp */
opacity: 0.3;
/* Makes the stamp semi-transparent */
}
/* The shadow effect under the envelope */
.shadow {
position: absolute;
top: 200px;
left: 50%;
width: 400px;
height: 30px;
border-radius: 100%;
/* Makes the shadow oval */
background: radial-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
/* Creates a fading shadow */
transition: 0.4s;
/* Smooth transition for animation */
transform: translateX(-50%);
/* Centers the shadow */
}
/* Animation effects on hover */
.letter-image:hover .animated-mail {
transform: translateY(50px);
/* Moves the mail down */
}
/* Animation effects for the top fold on hover */
.letter-image:hover .animated-mail .top-fold {
transition: transform 0.4s, z-index 0.2s;
/* Smooth transition for rotation */
transform: rotateX(180deg);
/* Rotates the top fold */
z-index: 0;
/* Changes stacking order */
}
/* Animation effects for the letter on hover */
.letter-image:hover .animated-mail .letter {
height: 180px;
/* Expands the letter */
}
/* Animation effects for the shadow on hover */
.letter-image:hover .shadow {
width: 250px;
/* Narrows the shadow */
}Explanation:
- Body Background: Sets a dark blue background for the entire page.
- Letter Image Positioning: Centers the letter image container on the page.
- Envelope and Letter Parts: Defines the styles for different parts of the envelope and the letter.
- Hover Effects: Adds interactive animations when the user hovers over the letter image.
Step 3: Bringing It All Together
Once you have both the HTML and CSS files set up, open the index.html file in your browser to see the animated mail button in action. Hover over the mail button to watch the envelope open and reveal the letter inside.
Conclusion
This animated mail button is a great way to add some interactivity and visual interest to your website. It’s a fun project that demonstrates the power of CSS animations and transitions.
You can download the full source code here. If you have any questions or need further assistance, feel free to contact me.
Thank you for following along with Day 34 of my #100DaysOfCode Challenge. Stay tuned for more exciting projects and tutorials!
