Subscribe Form #4

index.html

<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>

script.js

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);
});

style.scss

@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;
}

subscribe-form-4.markdown

Subscribe Form #4

A Pen by Ahmad Shadeed on CodePen.

License.