CSS styling for bookmarklet links (updated)

bookmarklet2.css

/* add the .peel-br or .peel-tr class to a link and wrap its contents with a span */

/* example:
   <a class="peel-br" href="javascript:;"><span>My bookmarklet</span></a>
*/

a.peel-br, a.peel-tr {
	position:relative;
	z-index:0;
}
a.peel-br > span, a.peel-tr > span {
	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 > span {
	box-shadow:inset -55px -137px 15px -135px #FFF;
}
a.peel-tr > span {
	box-shadow:inset -15px 10px 15px -25px #888, inset -85px 137px 15px -155px #AAA, inset 55px -137px 15px -135px #FFF;
}
a.peel-br > span::after, a.peel-tr > span::after {
	content:"";
	position:absolute;
	z-index:-1;
}
a.peel-br > span::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 > span::after {
	right:8px;
	top:-5px;
	height:75%;
	width:20px;
	box-shadow:10px 10px 4px 0 #666;
	transform:skew(-15deg) rotate(-6deg);
}
a.peel-br > span:hover {
	box-shadow:inset -80px -137px 15px -135px #FFF;
}
a.peel-tr > span:hover {
	box-shadow:inset -15px 10px 35px -45px #777, inset -95px 132px 25px -155px #888, inset 55px -137px 15px -135px #FFF;
}
a.peel-br:hover > span::after {
	bottom:14px;
	box-shadow:0 12px 8px 0 rgba(0, 0, 0, 0.6);
	transform:skew(13deg) rotate(8deg);
}
a.peel-tr:hover > span::after {
	box-shadow:12px 10px 4px 0 #888;
	transform:skew(-15deg) rotate(-2deg);
}