Untitled

dabblet.css

**
 * A banner made of one Div.
 */
html, body {	min-height: 100%;}
body {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
}

.bottomleft-banner {
	text-align: center;
	font-family: sans-serif;
	right: 0;
	bottom: 0;
	position: fixed;
	font-size: 1em;
	margin: 1em 1em;
	padding: 0.75em 10%;
	border-color: #000;
	border-width: 0.025em 0;
	border-style: solid;
	border-radius: 0.45em;
	box-shadow: 0 0 0.065em #000;
	text-shadow: -0.04em -0.02em 0.002em rgba(0, 0, 0, 0.25) , 0.04em 0.02em 0.002em #FFF;
	background-image: linear-gradient( to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 0.45em, rgba(0,0,0,1) 0.45em, rgba(0,0,0,0.25) 0.5em, rgba(0,0,0,0) 0.6em, rgba(255,255,255,0) 0.6em, rgba(255,255,255,0.5) 1em, rgba(255,255,255,0) 2em  ),
					  linear-gradient( to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 0.45em, rgba(0,0,0,1) 0.45em, rgba(0,0,0,0.25) 0.5em, rgba(0,0,0,0) 100%  ),
					linear-gradient( to bottom right, transparent, rgba(255,255,255,0.5) 25%, transparent),
					linear-gradient(to right, darkgrey 0%, transparent 60%),
					linear-gradient(to left, darkgrey 0%, transparent 60%);
	background-size: 100% 2em, 100% 2em, 100% calc(100% - 0.95em), 50% 100%, 50% 100%;
	background-repeat: no-repeat;
	background-position: top, bottom, 0 0.475em, left, right;
	transform: rotate(-45deg) translate(32%, 100% );
	background-color: white;
	transition: background-color 250ms ease;
	text-decoration: none;
	color: #000;
}
.bottomleft-banner:hover {
	background-color: red;
}

dabblet.html

<a class="bottomleft-banner" href="#github">Git-Hub<br />
If you please...</a>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}