Inspired By Kamil Khadeyev http://dribbble.com/shots/715067-Candy-UI. Click on form to see animated bg.

index.haml

.form-wrapper
  %form
    %input{:type => 'email', :placeholder => 'darkwardk@me.com'}
    %input{:id => 'submit', :type => 'submit', :value => 'Subscribe'}

script.js

$('form').submit(function() {
  $(this).parent('.form-wrapper').toggleClass('animate');
  	return false;
});

style.scss

@import "compass";
$medBlue: #34a8ce;
$darkBlue: #32a4ca;
$lightCreme: #f8fef4;
$medCreme: #fffae8;
$darkCreme: #f5f1e5;
$medRed: #d46139;
$darkRed: #d05025;

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: #d2d4c9;
  font-family: Helvetica;
}

.form-wrapper {
  background-image: linear-gradient(-41deg, 
                $darkBlue 1px,
                $medBlue 19px,
                $darkBlue 20px,
                $medCreme 21px,
                $darkCreme 39px,
                $lightCreme 40px,
                $darkRed 41px,
                $medRed 59px,
                $darkRed 60px,
                $medCreme 61px,
                $darkCreme 79px,
                $lightCreme 80px,
                $darkBlue 81px,
                $medBlue 99px,
                $darkBlue 100px,
                $medCreme 101px,
                $darkCreme 119px,
                $lightCreme 120px,
                $darkRed 121px,
                $medRed 139px,
                $darkRed 140px,
                $medCreme 141px,
                $darkCreme 159px,
                $lightCreme 160px,
                $darkBlue 161px,
                $medBlue 179px,
                $darkBlue 180px,
                $medCreme 181px,
                $darkCreme 199px,
                $lightCreme 200px,
                $darkRed 201px,
                $medRed 219px,
                $darkRed 220px,
                $medCreme 221px,
                $darkCreme 239px,
                $lightCreme 240px,
                $darkBlue 241px,
                $medBlue 259px,
                $darkBlue 260px,
                $medCreme 261px,
                $darkCreme 279px,
                $lightCreme 280px,
                $darkRed 281px,
                $medRed 299px,
                $darkRed 300px,
                $medCreme 301px,
                $darkCreme 319px,
                $lightCreme 320px,
                $darkBlue 321px,
                $medBlue 339px,
                $darkBlue 340px);
  background-size: 320px 50px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset,
              0 -1px 0 rgba(0,0,0,.2) inset,
              0 0 15px #a6a893;
  height: 190px;
  left: 50%;
  margin: -84px 0 0 -144px;
  width: 288px;
  position: absolute;
  top: 50%;
}

.animate {
  animation: bg-animate 1.5s linear;
}

form {
  background: linear-gradient(#f6f2e6, #f1ead7);
  border-radius: 4px;
  box-shadow: 0 1px 0 #fff inset, 
              0 1px 0 #d3bf8a;  
  height: 168px; 
  margin-top: 10px; 
  padding: 31px 0 0 26px;
  width: inherit;
}


input {
  border: 0;
  border-radius: 44px;
  font: {
    size: 13px;
    weight: bold;
  }
  height: 44px;
  outline: 0;
  width: 233px;

  &[type="email"] {
    background: #f5f3ed;
    box-shadow: 0 5px 10px #ccc0a4 inset, 
                0 -1px 0 #e6e1d7 inset, 
                0 1px 0 #fefefd;
    color: #7b745e;
    margin-bottom: 23px;
    padding-left: 20px;
    position: relative;
  }

  &[type="submit"] {
    background: linear-gradient(#e9764e, #af3b13);
    border: 1px solid #a3381b;
    box-shadow: 0 1px 0 #ffb68e inset, 
                0 -1px 0 #964022 inset, 
                0 -4px 5px #c04d25 inset, 
                0 1px 3px #b2a394;
    color: #fff;
    text: {
      shadow: 0 1px 1px #6b0300;
      transform: uppercase;
    }
    
    &:hover {
    	background: #cc5830;
    }
    &:active {
    	box-shadow:0 1px 0 #964022 inset,
        				0 4px 5px #c04d25 inset,  
                0 1px 0 #ffb68e;
    }
  }
}

@keyframes bg-animate {
  0% {
  	background-position: 0 0;
  }
  100% {
  	background-position: 340px 0;
  }
}