notes/Kankun Smart Plug HTML CSS Button Switch Toggle-k6u8AkX1.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#switch").click(function(){
$.post( "/cgi-bin/toggle.cgi", function( data ) {
console.log(data);
$("#switch").html(data);
});
});
});
</script>
<style>
.myButton {
-moz-box-shadow: 3px 4px 0px 0px #1564ad;
-webkit-box-shadow: 3px 4px 0px 0px #1564ad;
box-shadow: 3px 4px 0px 0px #1564ad;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
background-color:#79bbff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #337bc4;
display:block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:100px;
font-weight:bold;
padding:200px 40%;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
margin-left: auto;
margin-right: auto;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
background-color:#378de5;
}
.myButton:active {
position:relative;
top:1px;
}
</style>
</head>
<body>
<a href="#" id="switch" class="center myButton">Switch</a>
</body>
</html>
syntax highlighted by Code2HTML, v. 0.9.1