crazyrohila · March 2, 2013 21:47
diff --git a/dabblet.css b/dabblet.css
 /**
 * CSS3 start-stop button.
 */

 input.cbox {display:none;}
 .label {
 	cursor:pointer;
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	color: #008080;
 	font-size: 200%;
 	padding: 5px 10px;
 	border: 2px solid #008080;
 	border-radius: 10px;
 	box-shadow: 2px 2px 10px gray;
 }
 .label:after{content:"Start"}
 .label:hover {color:white;background:#008080;}
 #start:checked + .label:after {
 	content:"Stop";
 }
 #start:checked + .label:hover {
 	color:red;
 	background:black;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 	<input type="checkbox" id="start" class="cbox" value="start" />
 	<label for="start" class="label" id="labelstart"></label>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* CSS3 start-stop button.
	*/

	input.cbox {display:none;}
	.label {
	cursor:pointer;
	position: absolute;
	top: 50%;
	left: 50%;
	color: #008080;
	font-size: 200%;
	padding: 5px 10px;
	border: 2px solid #008080;
	border-radius: 10px;
	box-shadow: 2px 2px 10px gray;
	}
	.label:after{content:"Start"}
	.label:hover {color:white;background:#008080;}
	#start:checked + .label:after {
	content:"Stop";
	}
	#start:checked + .label:hover {
	color:red;
	background:black;
	}
	<!-- content to be placed inside <body>…</body> -->
	<input type="checkbox" id="start" class="cbox" value="start" />
	<label for="start" class="label" id="labelstart"></label>