JSFiddle - React, Tailwind, and code Playground

by EverybdyLies

HTML

<html>
<body>
    <a href="#"><span>Put on hold</span></a>   
</body>
</html>

CSS

body {padding:30px; font-family: Arial, Helvetica, sans-serif; background: #d4e1f4;}

a {
    display: block;
    height: 26px;
    width: 34px; 
    background: url(http://grinnbarrett.net/images/hold.png) 0 0 no-repeat;
    position: relative;
    text-decoration: none;
}

span {
    color: #373e46;
    font-weight: bold;
    width: 62px;
    font-size: 11px;
    padding: 4px 9px; 
    display: block; 
    border-radius: 5px; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.3); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.3); 
    box-shadow: 0 1px 2px rgba(0,0,0,.3); 
    position: relative;
    background: #f8f8f8; 
    background: -moz-linear-gradient(90deg,#e6eaf3,#f8f8f8);
    background: -webkit-gradient(linear,left bottom,left top,from(#e6eaf3),to(#f8f8f8));
    text-shadow: 0 1px 0 #fff;
    
    /*animate me*/
    opacity: 0;
    left: 25px;
    top: 3px; /* If we make this say -3000px, this will eliminate accidental hoverage when you're on the right side of the icon, but you lose the fade out  */
    -moz-transition: left 300ms ease-in-out, opacity 300ms ease-in-out;
    -webkit-transition: left 300ms ease-in-out, opacity 300ms ease-in-out;
}

span:after {
    content: ""; 
    display: block; 
    -webkit-border-radius: 5px 30px 5px 6px; 
    -moz-border-radius: 5px 30px 5px 6px; 
    border-radius: 5px 30px 5px 6px;  
    width: 15px; 
    height: 15px; 
    position: absolute; 
    top: 2px; 
    left: -5px; 
    z-index: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-box-shadow: -1px 2px 1px rgba(0,0,0,.15);
    -moz-box-shadow: -1px 2px 1px rgba(0,0,0,.15);
    box-shadow: -1px 2px 1px rgba(0,0,0,.15);
    background: #f8f8f8; 
    background: -moz-linear-gradient(135deg,#e6eaf3,#f8f8f8);
    background: -webkit-gradient(linear,right bottom,left top,from(#e6eaf3),to(#f8f8f8));
}

a:hover {background-position: 0 -26px;}
a:hover span {
    opacity: 1;
    left: 35px;
    top:...