djekl
7/20/2012 - 10:00 AM

CSS close button v3

CSS close button v3

settings.json
content_copyfile_download
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
dabblet.html
content_copyfile_download
<!-- content to be placed inside <body>…</body> -->
<div><a href="#">&#x2716;</a></div>
dabblet.css
content_copyfile_download
/**
 * CSS close button v3
 * no pseudo-elements, uses only background gradients on the link
 * doesn't work on IE9 or lower 
 * for IE9 support see v2: http://dabblet.com/gist/2687089
 */
body {
	background: rgb(247, 247, 242);
}
div {
	width: 300px;
	height: 200px;
	margin: 130px;
	border: solid 2px rgb(205, 230, 235);
	position: relative;
	background: rgb(229, 247, 251);
}
a {
	top: -30px;
	right: -30px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	position: absolute;
	background: radial-gradient(rgb(254, 255, 252) 40%, rgb(230, 230, 239) 41%,
			rgb(230, 230, 239) 43%, rgb(247, 247, 242) 45%,
			rgb(247, 247, 242) 67%, transparent 67%),
		linear-gradient(45deg, 
			rgb(205, 230, 235) 34%, 
			rgb(247, 247, 242) 34%);
	color: rgb(107, 181, 201);
	font-size: 50px;
	line-height: 80px;
	text-align: center;
	text-decoration: none;
}