Cool Email Input Field With Pure HTML & CSS

Hi! Programmers, In this blog post we are going to make a cool Email Input Field with pure HTML & CSS. Have you ever come across a stylish email input field on a web application & wondered how it was created?

Wonder No more! In this tutorial, we will make such a cool email Input field. We will achieve a clean and modern look for our email input from defining the root variables to setting up hover effects.

Also Read: OTP Input Feild With Pure HTML & CSS

We will walk through concepts like CSS flex Box, Box Shadow & CSS Box Model. This blog post explains important concepts used in the project step by step. At the last I will provide the entire source code so that you can run this project on your local machine.

Concepts Used To Make Cool Email Input Field

1. HTML Form
2. CSS Box Shadow, Box Model & Felx Bpx
3. Border Radius & Box Shadow
4. CSS Transition

Understanding HTML To Make Email Input Field

The HTML code sets up a simple form layout with an email input field and a send button. The elements are organized within a container to ensure a clean and centered presentation.

<div class="container">
    <div class="container__item">
        <form class="form">
            <input type="email" class="form__field" placeholder="Your E-Mail Address" />
            <button type="button" class="btn btn--primary btn--inside uppercase">Send</button>
        </form>
    </div>
</div>

1. <div class="container">: This acts as the main container for centering the form on the page.
2. <div class="container__item">: A sub-container that holds the form.
3. <form class="form">: The form element, which includes the email input and send button.
4. <input type="email" class="form__field" placeholder="Your E-Mail Address" />: An input field for the user to enter their email address.
5. <button type="button" class="btn btn--primary btn--inside uppercase">Send</button>: A button styled as a primary button with text in uppercase.

Understanding CSS To Make Email Input Field

The CSS defines the styles for the container, form, input field, and button. It uses various properties to ensure a modern, clean, and user-friendly design.

Root and Global Styles

These styles set the basic appearance for the body and the overall page layout.

:root {
    background: #f5f6fa;
    color: #9c9c9c;
    font: 1rem "PT Sans", sans-serif;
}

html, body, .container {
    height: 100%;
}

1. :root: Defines global variables for background color, text color, and font settings.
2. html, body, .container: Ensures the container fills the entire height of the viewport.

Link Styles

These styles control the appearance of links within the page.

a {
    color: inherit;
}

a:hover {
    color: #7f8ff4;
}

1. color: inherit: Makes links take on the parent element’s text color.
2. color: #7f8ff4: Changes the link color to a blue shade when hovered.

Container and Flexbox

The container class uses flexbox to center the content both horizontally and vertically.

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

1. display: flex: Sets the container to use Flexbox for layout.
2. flex-direction: column: Stacks child elements vertically.
3. align-items: center: Centers child elements horizontally.
4. justify-content: center: Centers child elements vertically.

Uppercase Text

This class ensures that any text using it will be converted to uppercase.

.uppercase {
    text-transform: uppercase;
}

1. text-transform: uppercase: Converts text to uppercase.

Button Styles

The button classes define the appearance, hover effects, and active state for the button.

.btn {
    display: inline-block;
    background: transparent;
    color: inherit;
    font: inherit;
    border: 0;
    outline: 0;
    padding: 0;
    transition: all 200ms ease-in;
    cursor: pointer;
}

.btn--primary {
    background: #7f8ff4;
    color: #fff;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
    border-radius: 2px;
    padding: 12px 36px;
}

.btn--primary:hover {
    background: #6c7ff2;
}

.btn--primary:active {
    background: #7f8ff4;
    box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, .2);
}

.btn--inside {
    margin-left: -96px;
}

1. .btn: Basic button styles, including no background, inherited color, and cursor change on hover.
2. .btn--primary: Styles for the primary button, including background color, text color, box shadow, border-radius, and padding.
3. .btn--primary:hover: Changes the button background color when hovered.
4. .btn--primary:active: Modifies the button background color and adds an inset box shadow when the button is clicked.
5. .btn--inside: Adjusts the button position by using a negative left margin.

Form Field

This class styles the input field for the form, ensuring it is visually appealing and easy to use.

.form__field {
    width: 360px;
    background: #fff;
    color: #a3a3a3;
    font: inherit;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .1);
    border: 0;
    outline: 0;
    padding: 22px 18px;
}

1. width: 360px: Sets the width of the input field.
2. background: #fff: Sets a white background for the input field.
3. color: #a3a3a3: Sets the text color inside the input field.
4. box-shadow: Adds a shadow around the input field for a 3D effect.
5. padding: 22px 18px: Adds padding inside the input field for better spacing.

Practical Tips

1. Customization: You can change the colors, sizes, and fonts by modifying the CSS variables and styles.
2. Responsiveness: Ensure the form is responsive by using percentages or relative units for widths and by testing on different devices.
3. Accessibility: Add labels to form elements and ensure that text contrasts sufficiently with backgrounds for readability.
4. Testing: Test the form on various browsers to ensure consistent appearance and functionality.

Source Code OF Cool Email Input Field

HTML CODE:

<div class="container">
	<div class="container__item">
		<form class="form">
			<input type="email" class="form__field" placeholder="Your E-Mail Address" />
			<button type="button" class="btn btn--primary btn--inside uppercase">Send</button>
		</form>
	</div>
	
</div>

CSS:

<style>
    :root {
	 background: #f5f6fa;
	 color: #9c9c9c;
	 font: 1rem "PT Sans", sans-serif;
}
 html, body, .container {
	 height: 100%;
}
 a {
	 color: inherit;
}
 a:hover {
	 color: #7f8ff4;
}
 .container {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
}
 .uppercase {
	 text-transform: uppercase;
}
 .btn {
	 display: inline-block;
	 background: transparent;
	 color: inherit;
	 font: inherit;
	 border: 0;
	 outline: 0;
	 padding: 0;
	 transition: all 200ms ease-in;
	 cursor: pointer;
}
 .btn--primary {
	 background: #7f8ff4;
	 color: #fff;
	 box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
	 border-radius: 2px;
	 padding: 12px 36px;
}
 .btn--primary:hover {
	 background: #6c7ff2;
}
 .btn--primary:active {
	 background: #7f8ff4;
	 box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, .2);
}
 .btn--inside {
	 margin-left: -96px;
}
 .form__field {
	 width: 360px;
	 background: #fff;
	 color: #a3a3a3;
	 font: inherit;
	 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .1);
	 border: 0;
	 outline: 0;
	 padding: 22px 18px;
}
 
</style>

About Author