title: Blur page background on button Click
body: <p>I have been looking for a solution that will blur the CSS3 background I have in place when the user clicks a button. </p>
  
  <p>At the moment the HTML is as so:</p>
  
  <pre><code>&lt;div class="button"&gt;
      &lt;li&gt;&lt;a href="#" alt="fade button"&gt;Start Now&lt;/a&gt;&lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS is:</p>
  
  <pre><code>html, body { margin:0px; padding: 0px; background: url(../assets/background.png) no-repeat center center fixed;  -webkit-background-size: cover; -moz-background-size: cover;  -o-background-size: cover; background-size: cover;}
  
  .button { 
      vertical-align: middle;
      width:150px; 
      margin: 0 auto;  
      margin-top:200px;
      background-color:#81DF7B;
      padding:10px;
      border-radius: 5px;
      text-decoration: none;
      color:#333;
      font-weight:300;
      font-size: 1.3em;
      -webkit-transition: background-color 0.3s ease-in-out 0s;
      -moz-transition: background-color 0.3s ease-in-out 0s;
      -o-transition: background-color 0.3s ease-in-out 0s;
      -ms-transition: background-color 0.3s ease-in-out 0s;
      transition: background-color 0.3s ease-in-out 0s;
  }
  
  .button:hover{ 
      background-color: #00CC33; 
      cursor:pointer;
  }
  
  .button li {padding:20px; text-align:center; text-decoration: none; list-style: none; }
  .button li a {text-decoration: none;}
  </code></pre>
  
  <p>As you can see the background image is attached to html and body as a CSS3 cover image. </p>
  
  <p>What I would like is when the user clicks on the 'Start Now' button this background transitions smoothly to a blur so that hidden form fields can appear over the top clearly. </p>
  
  <p>I have been looking at blur.js and Jquery blur but can't work out the best way to implement this. </p>
  
  <p>Any advice would be much appreciated :) </p>