Skip to content

Instantly share code, notes, and snippets.

@wizard04wsu
Last active July 1, 2020 17:53
Show Gist options
  • Save wizard04wsu/11300987 to your computer and use it in GitHub Desktop.
Save wizard04wsu/11300987 to your computer and use it in GitHub Desktop.
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment