Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created Oct 30, 2017
Embed
What would you like to do?
Subscribe Form #4
<form>
<input type="email" id="email"/>
<label for="email">email address</label>
<button id="button">OK</button>
</form>
<p>Original <a href="https://dribbble.com/shots/2359423-Daily-UI-026-Subscribe" target="_blank">idea</a> by <a href="https://dribbble.com/dmtors" target="_blank"> Derek Torsani</a> on Dribbble</p>
var email = document.getElementById('email'),
button = document.getElementById('button');
function validateEmail(email) {
var ex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return ex.test(email);
}
email.addEventListener('keydown', function() {
var email = this.value;
if(validateEmail(email)) {
button.classList.add('is-active');
}
});
button.addEventListener('click', function(e){
e.preventDefault();
this.classList.add('is-done','is-active');
setTimeout(function(){
button.innerHTML = "Thanks! Check Your Email."
}, 500);
});
@mixin placeholder {
&::-webkit-input-placeholder { @content }
&:-moz-placeholder { @content }
&::-moz-placeholder { @content }
&:-ms-input-placeholder { @content }
}
body {
background: #2a7cd3;
font-family: 'Arial';
text-align: center;
}
* {
box-sizing: border-box;
}
p {
color: #fff;
a {
color: rgba(255,255,255, 0.5);
}
}
form {
position: relative;
margin: 200px auto 50px auto;
width: 550px;
height: 80px;
}
input {
@include placeholder {
color: #fff;
text-transform: capitalize;
}
position: absolute;
width: 100%;
height: 100%;
left: 0;
border: 0;
border-radius: 4px;
background: #065cb7;
outline: 0;
padding: 2em 1em 1em 1em;
color: #fff;
font-size: 1em;
transition: background 0.35s ease-out;
&:focus {
background: #044f9e;
}
&:focus + label {
transform: translateY(-10px) scale(0.8);
color: #6da6df;
+ button {
opacity: 1;
}
}
}
label {
position: absolute;
left: 1em;
top: 50%;
margin-top: -8px;
color: #fff;
text-transform: capitalize;
transform-origin: left center;
transition: transform 0.25s ease-out, color 0.25s ease-out;
}
button {
position: absolute;
right: 0;
width: 120px;
height: 100%;
border: 0;
border-radius: 4px;
font-size: 1em;
background: #065cb7;
color: #044f9e;
cursor: pointer;
opacity: 0;
outline: none;
transition: opacity 0.35s ease-out, width 0.5s ease-out, background 0.25s ease-out;
}
button.is-active {
background: #5c94cd;
color: #fff;
}
button.is-done {
width: 100%;
opacity: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment