Call for action text field

by Kirubel Girma

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="callfa">
  <input class="minpt" type="text" placeholder="your email...">
  <div class="cal_btn">
    <input class="mbtn" type="button">
    <i class="mico fa fa-paper-plane plane fa-lg hidden"></i>
    <div class="mtxt">Submit</div>
  </div>
</div>

CSS

body {
  background-color: white;
}

.callfa {
  display: inline;
  float: left;
  height: 3em;
}

.cal_btn {
  position: absolute;
  display: inline;
  cursor: pointer;
}

.mico {
  color: white;
  position: absolute;
  top: 0.7em;
  left: 4.2em;
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.mtxt {
  font-family: Open Sans, Arial, Helvetica, sans-serif;
  top: 1.2em;
  left: 1.9em;
  position: absolute;
  color: white;
}

.minpt {
  height: 1.7em;
  width: 15em;
  float: left;
}

.minpt[type='text'] {
  padding: 0em 0em 0em .8em;
  font-size: 1.9em;
  font-family: Open Sans, Arial, Helvetica, sans-serif;
  border-radius: .2em 0em 0em .2em;
  border: none;
  color: #95989A;
  border: 0.045em solid #2296f3;
  outline: inherit !important;
}

::-webkit-input-placeholder {
  opacity: .3 !important;
}

:-moz-placeholder {
  /* Firefox 18- */
  opacity: .3 !important;
}

::-moz-placeholder {
  /* Firefox 19+ */
  opacity: .3 !important;
}

:-ms-input-placeholder {
  opacity: .3 !important;
}

.mbtn {
  cursor: pointer;
  height: 3.4em;
  width: 8.1em;
  border-radius: 0em .5em .5em 0em;
  background: #2196F3 !important;
  color: inherit;
  border: none;
  padding: 0! important;
  font: inherit;
  outline: inherit !important;
}

@keyframes floating {
  from {
    transform: translate(5px, -5px);
  }
  65% {
    transform: translate(0, 10px);
  }
  to {
    transform: translate(5px, -5px);
  }
}

JavaScript

function validateForm() {
  var x = document.forms["myForm"]["email"].value;
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
    alert("Not a valid e-mail address");
    return false;
  }
}