Skip to content

Instantly share code, notes, and snippets.

/dabblet.css

Created August 8, 2015 19:25
Show Gist options
  • Save anonymous/08b9f984ced6e2d634c1 to your computer and use it in GitHub Desktop.
Save anonymous/08b9f984ced6e2d634c1 to your computer and use it in GitHub Desktop.
Download ZIP
"OK"
Raw
dabblet.css
/*
"OK"
*/
html,body { height: 100%; }
body {
background: linear-gradient(45deg, ghostwhite, ivory);
display: flex;
align-items: center;
justify-content: center;
}
button {
font-family: "Universalia+", "Arial", "Helvetica", sans-serif;
background: transparent;
cursor: pointer;
padding: 0rem 1.5rem;
font-size: 24px;
margin-top: 10px;
color: #9cf;
border: 1.5px solid #9cf;
border-radius: 3px;
position: relative;
box-shadow: -4px -3px 13px rgba(153,204,255,0.4),-1px -1px 13px rgba(153,204,255,0.2) inset;
transition: all 0.35s cubic-bezier(.92,.94,0,.98);
user-select: none;
}
button:hover {
background: rgba(153,204,255,0.1);
}
button:active { box-shadow: 0 0 50px #9cf; background: #9cf; border-color: #9cf; color: snow;}
button::after {
content: "“ "attr(title)" ”";
white-space: pre;
display: block;
position: absolute;
width: 100%;
left: 0;
top: calc(100% + 2px);
text-align: center;
font-family: "Monaco", "Menlo", "Courier New", monospace;
font-size: smaller;
text-transform: uppercase;
letter-spacing: 1.25px;
transition: opacity 0.5s cubic-bezier(.8,1,1,1), transform 0.2s ease-in-out;
}
button:focus::after,button:active::after {
content: attr(title);
transform: translateY(-125%) scale(5) translateY(-25%) rotate(-45deg);
opacity: 0;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<button title="ok">&#10003;</button>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","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