andy-h
4/25/2014 - 7:48 PM

CSS styling for bookmarklet links ( Updated version here: https://gist.github.com/wizard04wsu/a22bb88dcafb5229320e0e02ba08ef73 )

CSS styling for bookmarklet links ( Updated version here: https://gist.github.com/wizard04wsu/a22bb88dcafb5229320e0e02ba08ef73 )

/* just add either class .peel-br or .peel-tr to your bookmarklet link */

a.peel-br, a.peel-tr {
	display:inline-block;
	position:relative;
	padding:0.4em 0.6em;
	border:1px solid #B4B4B4;
	border-radius:5px;
	background-color:#E6E6E6;
	color:#333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-decoration:none;
	cursor:move;
}
a.peel-br {
	box-shadow:inset -55px -137px 15px -135px #FFF;
}
a.peel-tr {
	box-shadow:inset -15px 15px 15px -25px #888, inset -85px 137px 15px -155px #AAA, inset 55px -137px 15px -135px #FFF;
}
a.peel-br::after, a.peel-tr::after {
	content:"";
	position:absolute;
	z-index:-1;
}
a.peel-br::after {
	right:8px;
	bottom:12px;
	height:55%;
	width:75%;
	box-shadow:0 10px 8px 0 rgba(0, 0, 0, 0.6);
	transform:skew(13deg) rotate(6deg);
}
a.peel-tr::after {
	right:8px;
	top:-5px;
	height:75%;
	width:20px;
	box-shadow:10px 10px 4px 0 #666;
	transform:skew(-15deg) rotate(-6deg);
}
a.peel-br:hover {
	box-shadow:inset -80px -137px 15px -135px #FFF;
}
a.peel-tr:hover {
	box-shadow:inset -25px 25px 15px -35px #777, inset -95px 132px 25px -155px #888, inset 55px -137px 15px -135px #FFF;
}
a.peel-br:hover::after {
	bottom:14px;
	box-shadow:0 12px 8px 0 rgba(0, 0, 0, 0.6);
	transform:skew(13deg) rotate(8deg);
}
a.peel-tr:hover::after {
	box-shadow:12px 10px 4px 0 #888;
	transform:skew(-15deg) rotate(-2deg);
}