Mail Element Concept

index.html

<div class="mail">
    <h1>Shoot me an e-mail!</h1>
    <div class="trigger">
      <textarea name="name" rows="4" cols="40"></textarea>
      <button type="button" name="button">send</button>
    </div>
    <svg id="check" height="30px" version="1.1" viewBox="0 0 18 15" width="18px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
        <g fill="#000000" id="Core" transform="translate(-423.000000, -47.000000)">
          <g  transform="translate(423.000000, 47.500000)">
            <path id="path" d="M6,10.2 L1.8,6 L0.4,7.4 L6,13 L18,1 L16.6,-0.4 L6,10.2 Z" id="Shape"/>
          </g>
        </g>
      </g>
    </svg>
  </div>

Mail Element Concept.markdown

Mail Element Concept

A quick concept for a mail element ui.

A Pen by Andreas Neeven on CodePen.

License.

script.js

$('.mail').on('click', function() {
    $('h1').css('display', 'none');
    $('.trigger').addClass('open');
    $('.mail').addClass('active');
    $('textarea').focus();
});

$('button').on('click', function() {
  $('.trigger').addClass('close');
  $('.close').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
    function(e) {
      $(this).css('display', 'none');
      $('svg').css('display', 'block');
      $('#line').css('display', 'block');
      var check = Snap.select('#path');

      check.animate({
          'fill': '#F2674A'
        }, 1000, mina.easeinout);
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>

style.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
	background: #F3F3F3;
}

.mail {
  display: flex;
  width: 450px;
  height: 300px;
  background-color: #292B33;
  justify-content: center;
  align-items: center;
	cursor: pointer;
}

h1 {
  display: flex;
  font-family: Arial;
  font-size: 28px;
  font-weight: 300;
  color: white;
  align-self: center;
}

.trigger {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #F2674A;
  border-radius: 50%;
  margin-left: 25px;
  transition: height .3s ease;
  cursor: pointer;
  &:after {
    position: absolute;
    content: '';
    top: 38px;
    left: 32px;
    width: 50px;
    height: 50px;
    background: url('http://i58.tinypic.com/ngdksw.png') no-repeat;
    display: inline;
  }
  button {
    opacity: 0;
  }
}

.trigger textarea {
  display: none;
}

.open {
  width: 450px;
  height: 300px;
  border-radius: 0;
  margin-left: 0;
  cursor: auto;

  &:after {
    top: 25px;
    left: 25px;
  }

  button {
    position: absolute;
    opacity: 1;
    bottom: 25px;
    right: 25px;
		outline: none;
  }
}

.open textarea {
  position: relative;
  width: 400px;
  height: 175px;
  display: block;
  background: transparent;
  border: none;
  resize: none;
  top: 75px;
  left: 25px;
  font-size: 24px;

  &:focus {
    outline: 0;
  }
}

.close {
  width: 450px;
  height: 0px;
  transition: height .3s ease;
  &:after,
  button,
  textarea {
    display: none;
  }
}

button {
  width: 75px;
  height: 25px;
  background-color: transparent;
  cursor: pointer;
  border: none;
  color: white;
  font-size: 20px;
  transition: color .2s ease;
  &:hover {
    color: #292B33;
  }
}

svg {
  display: none;
}

#check {
  width: 75px;
}