Email Input Field

Developer
Dean Hidri
Size
2,842 Kb
Views
18,216
  1. Email Input Field Previews
  2. Email Input Field HTML Codes
  3. Email Input Field CSS Codes

How do I make an email input field?

Inspired by Daniel Luca. https://dribbble.com/shots/2989456-Email-input-field. What is a email input field? How do you make a email input field? This script and codes were developed by Dean Hidri on 01 October 2022, Saturday.

Email Input Field Previews
IQ Test

Email Input Field - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Email Input Field</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=PT+Sans'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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 class="container__item container__item--bottom">	<p>Inspired by <a href="//dribbble.com/shots/2989456-Email-input-field" target="_blank">Daniel Luca</a>.</p>	</div>
</div>
</body>
</html>

Email Input Field - Script Codes CSS Codes

: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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.uppercase { text-transform: uppercase;
}
.btn { display: inline-block; background: transparent; color: inherit; font: inherit; border: 0; outline: 0; padding: 0; -webkit-transition: all 200ms ease-in; transition: all 200ms ease-in; cursor: pointer;
}
.btn--primary { background: #7f8ff4; color: #fff; box-shadow: 0 0 10px 2px rgba(0, 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, 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, 0.1); border: 0; outline: 0; padding: 22px 18px;
}
Email Input Field - Script Codes
Email Input Field - Script Codes
Home Page Home
Developer Dean Hidri
Username visualcookie
Uploaded October 01, 2022
Rating 4.5
Size 2,842 Kb
Views 18,216
Do you need developer help for Email Input Field?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dean Hidri (visualcookie) Script Codes
Name
3D Button with Feedback
CSS3 Circle Animation
Skew Button
CSS3 Spinner
Embedo Test
Olympic Story CSS3 Loader
Yet another CSS3 Loader
B4S3 T3MPL4T3
Mana Button
Flexbox - Sticky Footer
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!