I'd say your best bet would be to use something like jQuery to make an AJAX call and then manipulate the DOM depending on what response you get. Something like:
$('#loginForm').submit( function (e) {
// Stop the form actually doing anything or refreshing the page
e.preventDefault();
// Get the inputs from the form
var data = $(this).serialize(),
button = $(this).find('button');
// Find our button and change its text or something...
button.text('Logging you in');
$.ajax({
method: 'POST',
url: '/',
data: data,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data) {
// They are now logged in, reflect that in your button
button.text('Logged in!');
// Maybe redirect them aswell?
window.location.href = "/some/members/area";
})
.error(function(data) {
// Something went wrong, we can now show that
button.text('Something went wrong');
});
});
Thats a adapted version of code I found from this question: Front end login form with ajaxFront end login form with ajax so I haven't actually tested it, but it sounds like it should work and then changing the button is just straight forward jquery.
If you get errors with CSRF protection, then you should find a solution here: http://buildwithcraft.com/help/csrf-protection#updating-your-javascript
Hope that helps get you started!
