Creating an email subscription form with animation using only HTML and CSS is a great way to enhance the user experience on your website without the need for JavaScript. This tutorial will guide you through the steps to build a stylish and responsive email subscription form with subtle animations to grab users’ attention. We’ll cover the basic structure using HTML and add styles and animations with CSS to make the form interactive and visually appealing.
WATCH TUTORIAL:
HTML Structure
First, let’s set up the basic HTML structure for the email subscription form. We’ll create a simple form with an input field for the email address and a submit button.
<!DOCTYPE html>
<!-- Defines the document type and version of HTML being used -->
<html lang="en">
<!-- The root element of the HTML document, with the language attribute set to English -->
<head>
<meta charset="UTF-8">
<!-- Sets the character encoding for the HTML document to UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Ensures proper rendering and touch zooming on all devices -->
<title>Subscribe Button</title>
<!-- The title of the document, shown in the browser's title bar or tab -->
<link rel="stylesheet" href="style.css">
<!-- Links an external CSS file to style the HTML document -->
</head>
<body>
<!-- The body element contains the content of the HTML document -->
<div class="wrapper">
<!-- A wrapper div to contain and style the email subscription form -->
<input type="checkbox" id="click">
<!-- A hidden checkbox used to trigger the animation when checked -->
<label for="click" class="btn-1">Subscribe</label>
<!-- A label for the checkbox, styled as a button with the text "Subscribe" -->
<div class="field">
<!-- A div containing the email input field and the second subscribe button -->
<input type="text" placeholder="Enter Email Address">
<!-- A text input field for the user to enter their email address -->
<label for="click" class="btn-2">Subscribe</label>
<!-- A second label for the checkbox, styled as a button with the text "Subscribe" -->
</div>
</div>
</body>
</html>
CSS Styling and Animation
Next, we’ll add CSS to style the form and create the animations. We’ll use keyframes to define the animation and apply transitions to the form elements for smooth interactions.
/* Apply these styles to all elements */
* {
padding: 0; /* Remove default padding */
margin: 0; /* Remove default margin */
box-sizing: border-box; /* Include padding and border in element's total width and height */
}
/* Style the HTML and body elements */
html, body {
height: 100%; /* Make the body take up the full height of the viewport */
display: grid; /* Use CSS Grid layout */
background: #af03aa; /* Set a purple background color */
place-items: center; /* Center the content both vertically and horizontally */
}
/* Customize the appearance of selected text */
::selection {
background: #b103a9; /* Set background color of selected text */
color: #fff; /* Set the text color of selected text */
}
/* Style the wrapper div */
.wrapper {
position: relative; /* Position relative to allow absolute positioning of child elements */
display: flex; /* Use Flexbox layout */
text-align: center; /* Center text within the wrapper */
align-items: center; /* Center items vertically */
height: 60px; /* Set a fixed height for the wrapper */
width: 400px; /* Set a fixed width for the wrapper */
justify-content: center; /* Center items horizontally */
}
/* Style the first button (btn-1) */
.wrapper .btn-1 {
position: absolute; /* Position absolutely within the wrapper */
color: #d007d3; /* Set text color */
background: #fff; /* Set background color */
height: 100%; /* Make button height match the wrapper height */
width: 50%; /* Set width to half of the wrapper width */
line-height: 60px; /* Center text vertically */
border-radius: 5px; /* Round the corners of the button */
font-size: 27px; /* Set font size */
font-weight: 500; /* Set font weight */
user-select: none; /* Prevent text selection */
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2); /* Add shadow effect */
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Smooth transition for animations */
cursor: pointer; /* Change cursor to pointer on hover */
}
/* Style the first button when it is active (clicked) */
.wrapper .btn-1:active {
transform: scale(0.9); /* Scale down the button when clicked */
}
/* Hide and resize the first button when the checkbox is checked */
#click:checked ~ .btn-1 {
opacity: 0; /* Make button invisible */
height: 40px; /* Reduce height */
width: 100px; /* Reduce width */
pointer-events: none; /* Disable interaction */
}
/* Style the field container */
.wrapper .field {
position: relative; /* Position relative to allow absolute positioning of child elements */
opacity: 0; /* Start with hidden field container */
pointer-events: none; /* Disable interaction */
height: 100%; /* Make field container height match the wrapper height */
width: 0%; /* Start with zero width */
transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Smooth transition for animations */
}
/* Expand the field container when the checkbox is checked */
#click:checked ~ .field {
width: 100%; /* Expand to full width */
pointer-events: auto; /* Enable interaction */
opacity: 1; /* Make field container visible */
}
/* Style the input field within the field container */
.wrapper .field input {
border: 2px solid #fff; /* White border around the input field */
height: 100%; /* Make input field height match the field container height */
width: 100%; /* Make input field width match the field container width */
border-radius: 5px; /* Round the corners */
padding: 0 30px 0 15px; /* Add padding inside the input field */
outline: none; /* Remove default focus outline */
font-size: 20px; /* Set font size */
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2); /* Add shadow effect */
}
/* Style the placeholder text within the input field */
.wrapper .field input::placeholder {
font-size: 18px; /* Set font size for placeholder */
color: #999; /* Set color for placeholder text */
}
/* Style the second button (btn-2) within the field container */
.wrapper .field .btn-2 {
position: absolute; /* Position absolutely within the field container */
transform: translateY(-50%); /* Center vertically */
top: 50%; /* Position at the middle of the field container */
right: 15px; /* Position 15px from the right edge */
font-size: 16px; /* Set font size */
color: #fff; /* Set text color */
line-height: 40px; /* Center text vertically */
background: #e106de; /* Set background color */
user-select: none; /* Prevent text selection */
border-radius: 5px; /* Round the corners */
height: 40px; /* Set fixed height */
width: 100px; /* Set fixed width */
cursor: pointer; /* Change cursor to pointer on hover */
transition: all 0.3s ease; /* Smooth transition for animations */
}
/* Style the second button when it is active (clicked) */
.wrapper .field .btn-2:active {
transform: translateY(-50%) scale(0.9); /* Scale down button when clicked */
}
/* Hide the checkbox element */
.wrapper #click {
display: none; /* Hide the checkbox from view */
}
Conclusion
By combining HTML and CSS, we have created a sleek and responsive email subscription form with subtle animations. This approach not only enhances the visual appeal of the form but also provides a better user experience without relying on JavaScript. Feel free to customize the styles and animations to match your website’s design and branding. Happy coding!
Crafting Engaging Email Subscription Forms: Pure HTML & CSS Animation