section.section.section-1
    .inner
        h1.title Hover Effect on Button
        form.form-block.form1
            input(type='text')
            button(type='submit') <span>Search</span>
            
        form.form-block.form2
            input(type='text')
            button(type='submit') <span>Search</span>
            
        form.form-block.form3
            input(type='text')
            button(type='submit') <span>Search</span>
            
        form.form-block.form4
            input(type='text')
            button(type='submit') <span>Search</span>
            
        footer.end
            .byAuthor By Deepak Kamat <a href='http://www.stramaxon.com'>www.stramaxon.com</a>

body {
  margin:0;
  background-color:#5CCFA9;
  font:16px/1.6 normal normal "Open Sans","Helvetica", Arial, sans-serif;
}

section.section {
  width:100%;
  height:100vh;
  background-color:#5CCFA9;
}

section.section .inner {
  max-width:720px;
  margin:0 auto;
  padding:40px 20px;
}

section.section h1.title {
  text-align:center;
  color:#fff;
  font-size:3.2em;
  font-family: 'Pompiere', cursive;
  text-shadow:0 2px rgba(0,0,0,0.1);
}


/* Form Basic Styles */
.form-block {
  text-align:center;
  margin:20px 0;
}

.form-block input, 
.form-block button {
  font-family:"Lato", "Open Sans", Helvetica, Arial, sans-serif;
  padding:10px 20px;
  font-size:1.2em;
  border:2px solid rgba(0,0,0,0.1);
  background-color:#fff;
  
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
}

.form-block button {
  position:relative;
  text-transform:uppercase;
  background-color:#715AF8;
  color:#fff;
  min-width:120px;
  overflow:hidden;
  
  -webkit-transition:0.4s all ease-in-out;
  -moz-transition:0.4s all ease-in-out;
  -o-transition:0.4s all ease-in-out;
  -ms-transition:0.4s all ease-in-out;
  transition:0.4s all ease-in-out;
}

.form-block button:after {
  content:"\f002";
  font:normal normal normal 18px/1 FontAwesome;
  position:absolute;
  text-indent:0;
  top:0;
  left:0;
  right:0;
  bottom:0;
  height:100%;
  color:#fff;
  
  -webkit-transition:0.4s all ease-in-out;
  -moz-transition:0.4s all ease-in-out;
  -o-transition:0.4s all ease-in-out;
  -ms-transition:0.4s all ease-in-out;
  transition:0.4s all ease-in-out;
}

.form-block button span {
  -webkit-transition:0.4s all ease-in-out;
  -moz-transition:0.4s all ease-in-out;
  -o-transition:0.4s all ease-in-out;
  -ms-transition:0.4s all ease-in-out;
  transition:0.4s all ease-in-out;
}

/* Form 1 Style */
.form-block.form1 button {
  text-indent:-500px;
  cursor:pointer;
}

.form-block.form1 button:hover {
  background-color:#333;
  text-indent:0;
}

.form-block.form1 button::after {
   top:12px;
}

.form-block.form1 button:hover::after {
  text-indent:-500px;
}

/* Form 2 Style */
.form-block.form2 button {
  cursor:pointer;
  background-color:#E53C88;
}

.form-block.form2 button span {
  position:relative;
  top:-50px;
}

.form-block.form2 button:hover {
  background-color:#333;
}

.form-block.form2 button:hover span  {
  top:0px;
}

.form-block.form2 button::after {
   top:12px;
}

.form-block.form2 button:hover::after {
  text-indent:-250px;
}


/* Form 2 Style */
.form-block.form3 button {
  cursor:pointer;
  background-color:#EAA829;
}

.form-block.form3 button span {
  position:relative;
  bottom:-50px;
}

.form-block.form3 button:hover {
  background-color:#333;
}

.form-block.form3 button:hover span  {
  bottom:0;
}

.form-block.form3 button::after {
   top:12px;
}

.form-block.form3 button:hover::after {
  top:-50px;
}

/* Form 4 Style */
.form-block.form4 button {
  cursor:pointer;
  background-color:#75B545;
}

.form-block.form4 button span {
  position:relative;
  bottom:-50px;
  left:-150px;
}

.form-block.form4 button:hover {
  background-color:#333;
}

.form-block.form4 button:hover span  {
  bottom:0;
  left:0;
}

.form-block.form4 button::after {
   top:12px;
}

.form-block.form4 button:hover::after {
  top:-50px;
  right:-150px;
}



/* Footer End */
footer.end {
  margin-top:50px;
  text-align:center;
  color:#fff;
  text-shadow:0 2px rgba(0,0,0,0.1);
}

footer.end a {
  color:inherit;
  text-decoration:none;
  display:inline-block;
  padding:0 10px;
  background-color:rgba(0,0,0,.4);
  margin-left:5px;
  text-shadow:none;
}