Power Button

index.html

<button class="powerButton offline"></button>

Power-Button.markdown

Power Button

This is a button/indicator that will be part of a web app, when the user presses the button, it sends a WOL packet and pings the recipient until it times out or receives a response, at which point it changes to Online. It's actually pretty cool.

A Pen by mattfinch on CodePen.

License.

script.js

$('.offline').on('mouseover', function() {
	if ( !( $(this).hasClass('mouseover') ) ) { 
		$('.mouseover').removeClass('mouseover');
		$(this).addClass('mouseover');
		return false;
	}
});

$('.offline').on('click', function() {
	$(this).removeClass('offline');
	$(this).addClass('loading');
	//simulating waiting for the server response.
	setTimeout(function() { 
        $('.powerButton').removeClass('loading');
        $('.powerButton').addClass('online');
	}, 2500);
	return false;
});

$('.powerButton').on('mouseout', function() {
    $('.mouseover').removeClass('mouseover');
});

style.css

body {padding: 10%;font-family: sans-serif;text-align: center;}

* {outline: none}

.powerButton {
	border: none;
	background: #AAB2BD;
	color:#FFFFFF;
	font-weight:bold;
	border-radius:2px;
	-webkit-transition:all .35s ease;
	-moz-transition:all .35s ease; 
	transition:all .35s ease;
	display:inline-block;
	padding:.5em 1em; 
	width: 120px;
}

.powerButton.offline {background: #DA4453;}
.powerButton.offline:before {content: 'Offline';}

.powerButton.mouseover {background: #FC6E51;}
.powerButton.mouseover:before {content:'Power On?';}

.powerButton.loading {background: #3BAFDA;}
.powerButton.loading:before {content: 'Please Wait';}

.powerButton.online {background: #8cc152;}
.powerButton.online:before {content: 'Online';}