Improving the UX of the submit button

gistfile1.txt

UX improvement for Submitt Button
-----------------------------------


Forked from [Mark Hayes](http://codepen.io/mhayes)'s Pen [qdCAc](http://codepen.io/mhayes/pen/qdCAc/).

A [Pen](http://codepen.io/rafibomb/pen/bGszx) by [Rafi Benkual](http://codepen.io/rafibomb) on [CodePen](http://codepen.io/).

[License](http://codepen.io/rafibomb/pen/bGszx/license).

index.html

<button type="Submit" class="button postfix "><span class="button-content">Submit</span></button>
  

script.js

$('button').on('click', function(event){
  
  event.preventDefault();

  $(this)
    .blur()
    .addClass('is-submitted')
    .find('.button-content')
      .text('Got it, thanks!');
});


$(document).foundation();

style.css

button:active,
button.is-submitted,
button.is-submitted:hover,
button.is-submitted:active {
  background: #27ae60;
  outline: 0;
}

.button {
  height: 6rem;
  width:20rem;
  font-size:2rem;
}