Skip to content

Instantly share code, notes, and snippets.

@crazyrohila

crazyrohila/dabblet.css

Created March 2, 2013 21:47
Show Gist options
  • Save crazyrohila/5073429 to your computer and use it in GitHub Desktop.
Save crazyrohila/5073429 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 start-stop button.
Raw
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;
}
Raw
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>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment