Skip to content

Instantly share code, notes, and snippets.

@wizard04wsu
Created April 15, 2016 18:14
Show Gist options
  • Save wizard04wsu/a22bb88dcafb5229320e0e02ba08ef73 to your computer and use it in GitHub Desktop.
Save wizard04wsu/a22bb88dcafb5229320e0e02ba08ef73 to your computer and use it in GitHub Desktop.
CSS styling for bookmarklet links (updated)
/* 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment