Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<div class="actions container" lang="en">
  <h5>.action</h5><small>Note : adding classes should be the result of a succesful server response! It is faked here for demo purposes, see JS.</small>
  
  <i class="like action"><output>3.2M</output></i>
  <i class="comment action"><output>422</output></i>
  <i class="share action"><output>392</output></i>
  <i class="pearls action"></i>
  <i class="notify action"><output>1</output></i>
  <i class="follow action">
    <output></output>
  </i>
  <i class="pay action"></i>
  
  <i class="downvote action"></i>
  <i class="upvote action"></i>
  
  <i class="welcome action"></i>
  <a class="action">
    <i class="yellow sidebar icon"></i>
    <b>icon</b>
  </a>
  <br><small>The Like and Follow buttons' <code>.visited</code> can be toggled (like/unlike and follow/unfollow). The follow button labels could also be counts (of circles) resulting from a server response ... Add <code>.visited</code> to mark them as 'visited successfuly'.<br>A Follow relation can be <code>.confirmed</code>at any time: <a id="confirm" href="#">confirm</a>...<br>Notify classes are different: <code>.unread</code> – <a id="notify" href="#">notify me</a> | <code>.empty</code> – <a id="empty" href="#">empty</a> | – <code>.muted</code> – <a id="mute" href="#">mute</a> | <a id="reset" href="#">–– reset all buttons ––</a>
  </small>
</div>
<div class="reactions container">
  <h5>.reaction</h5>
  <i class="cool reaction"></i>
  <i class="happy reaction"></i>
  <i class="happy moustache reaction"></i>
  <i class="smiling reaction"></i>
  <i class="laughing reaction"></i>
  <i class="grinning reaction"></i>
  <i class="winking reaction"></i>
  <i class="kissing reaction"></i>
  <i class="kissed reaction"></i>
  <i class="cheek reaction"></i>
  
  <i class="indeterminate reaction"></i>
  <i class="indifferent reaction"></i>
  <i class="surprised reaction"></i>
  <i class="undecided reaction"></i>
  <i class="nap reaction"></i>
  <i class="sleep reaction"></i>
  <i class="moustache reaction"></i>
  <i class="confounded reaction"></i>
  <i class="wondering reaction"></i>
  <i class="sceptical reaction"></i>
  
  <i class="disapproval reaction"></i>
  <i class="unhappy reaction"></i>
  <i class="unhappy moustache reaction"></i>
  <i class="sad reaction"></i>
  <i class="displeased reaction"></i>
  <i class="fearful reaction"></i>
  <i class="crying reaction"></i>
  <i class="fail reaction"></i>
  <i class="angry reaction"></i>
  <i class="sarcastic reaction"></i>
  <i class="partying reaction"></i>
  <i class="angel reaction"></i>
  <i class="evil reaction"></i>
  <i class="dumb reaction"></i>
  <i class="shouting reaction"></i>
  <i class="screaming reaction"></i>
  <i class="vampire reaction"></i>
  <i class="tongue_cheek reaction"></i>
  <i class="smug reaction"></i>
  <i class="sigh reaction"></i>
  <i class="greedy reaction"></i>
  <i class="tongue_tied reaction"></i>
  <i class="tilt reaction"></i>
  <i class="rofl reaction"></i>
<!-- <i class="rofl copter reaction"></i> -->
  
  <i class="happy reaction"></i>
  <i class="thumbs up icon"></i>
  TEXT
</div>

<small>
<ul>
  <li>Fully responsive, sized in em ...</li>
  <li>Can be combined with Semantic UI / FontAwesome Icons or <a href="https://github.com/blog/2112-delivering-octicons-with-svg">SVG</a></li>
  <li>TODO, as usual: make as modular as possible what makes sense (e.g. colors, .circular ...)</li>
  <li>[WIP] &#x1F648;</li>
</ul>
<br>
</small>
              
            
!

CSS

              
                /* LESS CSS ... */

// TODO:
// actions: follow, report, "ripples"
//
// reactions: grimacing, nerdish, 
// thinking, thumb, beer, coffe, shot

// .action best viewed "30px+", e.g. 15px/ 2rem
// .reaction best viewed "18px+", e.g. 15px/ 1.2rem
@textColor: rgba(0, 0, 0, .8);
// should be the size of your container, just for convenience:
@actionSize: 2rem;
// customize :
@actionBackground: rgba(0, 0, 0, .8);
@actionVisitedBackground: #fff;
@actionBorder: #CBBB9D;

@reactionBackground: rgba(0, 0, 0, .72);
@reactionBorder: #9DA69D;
@reactionColor: white;
@reactionFont: "Maven Pro";

@red: #DC0005;
@yellow: #FFAF00;
@green: #95CC0D;

@pink: #CC0D5A;
@orange: #FF7A00;
@blue: #0D7ECC;
@olive: #95AE08;
@lightRed: #EB0005;
@lightGreen: #A4E00E;
@lightPurple: #A50DCC;

.unicode {
  font-family: "Microsoft Sans Serif","Lucida Sans Unicode", "Arial Unicode MS" !important;
  font-weight: 400 !important;
}
.iconContent {
  font-family: Icons;
  font-weight: 400;
  font-size: .76em;
  line-height: 1em;
  width: 100%;
  transform: none;
  transition: color .15s ease-out;
}

// just for the demo ...
body {
  font-family: @reactionFont;
  background-color: white;
  left: 10%;
  position: absolute;
  font-size: 15px;
  color: rgba(0,0,0,.6);
}
h5 { font-family: @reactionFont; }
.reactions.container { max-width: 36em; margin-top: 2rem; }
.actions.container { max-width: 44em; margin-top: 1.382rem; }
.action, .reaction { margin: .25ch; }

// <-- demo
._userSelect (@selProp: none) {
  -webkit-touch-callout: @selProp;
  -webkit-user-select: @selProp;
  -khtml-user-select: @selProp;
  -moz-user-select: @selProp;
  -ms-user-select: @selProp;
  user-select: @selProp;
}
.userSelect (@selProp) when (@selProp = none) {
  ._userSelect;
  &::selection { background: transparent; }
  &::-moz-selection { background: transparent; }
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.userSelect (@selProp) {
  ._userSelect(@selProp);
}
:root {
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
  -moz-font-feature-settings: 'kern=1, onum=1, liga=1';
  -ms-font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
  -o-font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
  font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
}
// i use is NOT recommended in (semantic) production :
i.meta, i.action, i.reaction {
  font-style: normal !important;
}
.action, .reaction {
  .userSelect(none);
  font-size: @actionSize;
  color: @reactionColor;
  font-family: @reactionFont;
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  text-align: center;
  width: 1.2em;
  height: 1.2em;
  line-height: 1.2em;
  border-radius: 50%;
  box-sizing: content-box !important;
  & + .icon {
    margin-left: -.7em;
    font-size: .7em;
  }
  // NOTE: for <5ch !!!
  // ... counts like "340" or "1.4k"
  & > *:not(.icon):first-child,
  & > .icon + * {
    .userSelect(none);
    width: 110%;
    position: absolute;
    top: 100%;
    left: -10%;
    padding: .382em 0 .618em 0;
    color: @textColor;
    font-size: 1rem;
    line-height: 1.2rem;
    text-align: center;
    transition: color .15s ease-out;
  }
  & > *.icon:first-child {
    color: darken(@reactionColor, 7%);  
    text-align: center;  
    margin: 0 !important;
    .iconContent;
  }
  &::before, &::after {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    font-size: .55em;
    font-weight: 700;
    transform: rotate(90deg);
    text-align: center;
    white-space: pre-wrap;
    border-radius: 50%;
    transition: border .15s ease-out;
  }
  &::before {
    left: 0;
    top: 0;
  }
  &::after {
    top: .25em;
    left: .0333em;
  }  
}

// ACTIONS : .action
@keyframes pulseBefore {
  0% { transform: scale(1) rotate(45deg); }
  30% { transform: scale(.8) rotate(36deg); }
  40% { transform: scale(1) rotate(45deg); }
  60% { transform: scale(1) rotate(45deg); }
  90% { transform: scale(.8) rotate(36deg); }
  100% { transform: scale(1) rotate(45deg); }
}
@keyframes pulseAfter {
  0% { transform: scale(1) rotate(-225deg); }
  30% { transform: scale(.8) rotate(-216deg); }
  40% { transform: scale(1) rotate(-225deg); }
  60% { transform: scale(1) rotate(-225deg); }
  90% { transform: scale(.8) rotate(-216deg);  }
  100% { transform: scale(1) rotate(-225deg); }
}
@keyframes pulseRing {
  @_pink: fade(@pink, 24%);
  @__pink: fade(@pink, 40%);
  0% { box-shadow: 0 0 0 0 @_pink; }
  5% { box-shadow: 0 0 0 2px @__pink; }
  10% { box-shadow: 0 0 0 0 @_pink; }
  15% { box-shadow: 0 0 0 3px @__pink; }
  20% { box-shadow: 0 0 0 0 @_pink; }
  25% { box-shadow: 0 0 0 1px @__pink; }
  30% { box-shadow: 0 0 0 0 @_pink; }
  35% { box-shadow: 0 0 0 1px @__pink; }
  40% { box-shadow: 0 0 0 0 @_pink; }
  45% { box-shadow: 0 0 0 1px @__pink; }
  50% { box-shadow: 0 0 0 0 @__pink; }
  55% { box-shadow: 0 0 0 1px @__pink; }
  60% { box-shadow: 0 0 0 0 @__pink; }
}
@keyframes widen {
  0% { letter-spacing: -.75em; width: .2em; opacity: .64; }
  100% { letter-spacing: -.15em; width: 1.2em; opacity: 1; }
}
@keyframes ring {
	0%, 50%, 100% { transform: rotate(0); }
  5% { transform: rotate(15deg); } 
	10%, 15%, 20%, 25%, 30%, 35%, 40% {
		transform: rotate(6deg);
	} 
	45% { transform: rotate(4deg); } 
  7.5% { transform: rotate(-15deg); }
  12.5%, 17.5%, 22.5%, 27.5%, 32.5%, 37.5%, 42.5% {
		transform: rotate(-6deg);
	}
	47.5% { transform: rotate(-2deg); }
}

a.action:not(.like):not(.comment):not(.share):not(.pearls):not(.follow):not(.pay):not(.welcome) {
  &:hover:not(.visited.clicked) {
    color: @reactionColor;
    border-color: @blue; 
  }
}
.action {
  border: 2px solid @actionBorder;
  transition: border .15s ease-out, background .15s ease-out;
  &:not(.visited) {
    background: @actionBackground;
  }
  &:hover:not(:visited):not(.visited), 
  &:active:not(:visited):not(.visited) {
    transition: border .32s ease-out;
  }
  &:hover, &:active {
    cursor: pointer;
  }
  &:visited, &.visited {
    border-color: @green;
    & > *:first-child { color: @green; }
  }
  &.unread {
    border-color: @red;
    & > *:first-child { color: @red;  }
  }
  // not for toggle buttons ...
  &:visited, &.visited, &.unread, &.clicked:not(.like):not(.follow) {
    background: @actionVisitedBackground;
  }
  &:not(.button > .action) {
    margin-bottom: 2rem;
  }
  
  &.like {
    &:hover:not(.visited.clicked) { border-color: @red; }
    &:visited:hover:not(:visited.clicked) > *:first-child,
    &.visited:hover:not(.visited.clicked) > *:first-child {
      color: @red;
    }
    &::before, &::after {
      content: "";
      top: .6em;
      width: 1.275em;
      height: .85em;
      border-radius: .533333em 0 0 .533333em;
    }
    &::before {
      left: .32em;
      transform: rotate(45deg);
      background: @lightRed;
    }
    &::after {
      left: .64em;
      transform: rotate(-225deg);
      background: @lightRed;
    }
    // 100 BPM ...
    &:visited, &.visited {
      &::before {
        background: linear-gradient(0deg, @lightRed 0%, @lightRed 80%, lighten(@lightRed, 32%) 100%);
        animation: pulseBefore 1280ms;
      }
      &::after {
        background: linear-gradient(90deg, lighten(@lightRed, 36%) 0%, @lightRed 40%);
        animation: pulseAfter 1280ms;
      }
    }
  }
  &.comment {
    &:hover:not(.visited.clicked) { border-color: @orange; }
    &::before, &::after {
      transform: none;
      top: .45em;
      color: white;
      text-align: left;
      letter-spacing: -.15em;
      line-height: .3em;
    }
    &::before {
      content:"";
      left: .06em;
      width: 0;
      height: 0;
      border-top: .5em solid transparent;
      border-right: 1em solid @orange;
      border-bottom: .5em solid transparent;
    }
    &::after {
      content:"––\a ––\a-";
      left: .55em;
      width: 1.2em;
      height: 1.025em;
      padding: .1em 0 0 .12em;
      background: @orange;
      border-radius: 16%;
    }
    &:visited::after, &.visited::after {
      background: linear-gradient(45deg, @orange 0%, @orange 64%, lighten(@orange, 32%) 100%);
    }
  }
  &.share {
    &:hover:not(.visited.clicked) {
      border-color: @lightGreen;
    }
    &::before {
      content: "\F064";
      font-family: Icons;
      font-size: .7em;
      line-height: 0;
      text-shadow: 0 1px .05em rgba(0,0,0,.8);
      padding-left: .1em;
      padding-bottom: .05em;
      border-radius: .1em .1em .15em .15em;
      border-left: .1em solid #fff;
      border-right: .1em solid #fff;
      border-bottom: .2em groove #ccc;
      height: .315em;
      width: 1em;
      color: @lightGreen;
      top: .815em;
      left: .2em;
      transform: none;
    }
    &::after {
      content: "";
      left: auto;
      left: 1.25em;
      top: .52em;
      border-radius: .05em .05em .05em .15em;
      width: .52em;
      height: .4em;
      transform: rotate(45deg) skewX(15deg);
    }
    &:visited, &.visited {
      &::before {
        border-left: .1em solid #808080;
        border-right: .1em solid #808080;
        border-bottom: .2em groove #666;
        color: @green;
        text-shadow: 0 1px .05em rgba(0,0,0,.4);
      }
      &::after {
        transition: border .15s ease-out;
        background: linear-gradient(0deg, rgba(255,255,255,.01) 0%, rgba(255,255,255,.32) 72%, rgba(255,255,255,.4) 100%);
      }
    }
  }
  &.pearls {
    &:hover:not(.visited.clicked) {
      border-color: @blue @pink @reactionBackground @yellow; 
    }
    &::before {
      top: .66em;
      left: 1.28em;
      content: "";
      transform: none;
      background: @pink;
      width: .88em;
      height: .88em;
      border-radius: 50%;
    }
    &::after {
      top: .6em;
      left: .56em;
      content: "";
      transform: none;
      background: @blue;
      width: 1em;
      height: 1em;
      border-radius: 50%;
      box-shadow: -1px 1px 0 rgba(0,0,20,.16),
        -.64em 0 0 -.11em @yellow;
    }
    &:visited, &.visited {
      &::before {
        background: radial-gradient(farthest-corner at .64em .04em, lighten(@yellow, 32%) 0%, lighten(@pink, 16%) 36%, @pink 48%, @pink 100%);
      }
      &::after {
        background: radial-gradient(farthest-corner at .7em .2em, lighten(@green, 40%) 0%, lighten(@blue, 16%) 32%, @blue 48%);
        box-shadow: -1px 1px 0 rgba(0,0,20,.16),
          -.55em -.32em .1em -.32em rgba(255,232,232,.56),
          -.4em .08em .16em -.22em rgba(13,20,32,.16),
          -.64em 0 0 -.11em @yellow;
      }
    }
  }
  &.notify {
    &:hover, &:active, &.unread:not(.muted) { border-color: @pink; }
    &.muted {
      background: fade(@reactionBackground, 48%);
    }
    &::before {
      font-family: Icons;
      font-size: .84em;
      top: -.036em;
      left: .016em;
      border-radius: 0;
      transform: none;
    }
    &:not(.muted)::before {
      content: "\f0f3";
    }
    &.muted::before {
      content: "\f1f6";
      color: #CBBB9D;
    }
    &:not(.muted)::after {
      content: "";
      letter-spacing: .05em;
      width: .5em;
      height: .64em;
      font-size: 1em;
      line-height: 1.36em;
      left: .36em;
      top: .16em;
      transform: none;
    }    
    &:not(.empty):not(.unread)::before {
      color: #CBBB9D;
    }
    &.empty:not(.muted)::before { color: #fff; }
    &.unread:not(.muted) {
      animation: pulseRing 3200ms;
      &::before {
        height: 1.06em;
        overflow: hidden;
        animation: ring 4000ms ease;
        color: @pink;
      }
      &::after {
        content: "•"; 
        color: @pink;
        background: linear-gradient(-135deg, lighten(@pink, 64%) 0%, @pink 48%);
      }
    }
    &:not(.unread) > *:first-child,
    &.unread.muted > *:first-child {
      display: none;
    }
  }
  
  &.follow {
    width: auto;
    min-width: 1.6em;
    border-radius: .64em;
    &:hover:not(.visited.clicked) { border-color: @lightPurple; }
    &:visited:hover:not(:visited.clicked) > *:first-child,
    &.visited:hover:not(.visited.clicked) > *:first-child {
      color: @red;
    }    
    &::before, &::after {
      content: "";
      transform: none;
      text-align: left;
      transition: color .32s ease-out, transform .15s ease-out,  border .15s ease-out, background .15s ease-out, box-shadow .15s ease-out, top .15s ease-out, left .15s ease-out;
    }
    &::before {
      width: 0; 
      height: 0;
      top: .5em;
      box-shadow: 0 0 0 .16em #fff;
      border-right: .56em solid @lightPurple;
      border-top: .56em solid @lightPurple;
      border-left: .56em solid #fff;
      border-bottom: .56em solid @lightPurple;
      border-radius: .55em;
    }
    &:visited::before, &.visited::before {
      transform: rotate(180deg);
      width: 0; 
      height: 0;
      top: .4em;
      left: .4em;
      box-shadow: none;
      border-right: .64em solid @lightPurple;
      border-top: .64em solid @lightPurple;
      border-left: .64em solid #fff;
      border-bottom: .64em solid @lightPurple;
      border-radius: .64em;
    }
    &:not(.confirmed):not(:visited):not(.visited)::before { 
      left: .84em;
    }
    &.confirmed:not(:visited):not(.visited)::before {
      left: 1.2em;
    }
    
    &:not(.confirmed)::after {
      content: "";
      width: .32em;
      height: .32em;
      border-radius: .32em;
      background: lighten(@actionBorder, 16%);
      top: .92em;
      left: .56em;
      // TODO
      box-shadow: 0 0 0 .16em #fff,
        .92em -.36em .36em .08em rgba(255,255,255,.48);
    }
    &.confirmed::after {
      content: "";
      width: 0;
      height: 0;
      top: .64em;
      left: .52em;
      border-right: .4em solid #fff;
      border-top: .4em solid @lightGreen;
      border-left: .4em solid @green;
      border-bottom: .4em solid @green;
      border-radius: .39em;
      box-shadow: 0 0 0 .16em #fff,
        1.08em -.36em .32em -.28em rgba(255,255,255,.48);
    }
    &:visited:not(.confirmed)::after,
    &.visited:not(.confirmed)::after {
      background: @actionBorder;
      left: 1.64em;
      top: .88em;
      box-shadow: -.5em -.5em .3em .25em rgba(255,255,255,.4);
    }
    &:visited.confirmed::after,
    &.visited.confirmed::after {
      content: '\25CF';
      color: rgba(0,0,0,0);
      text-shadow: -.64em .24em .36em #fff;
      top: .4em;
      left: 1.36em;
      transform: rotate(-180deg);
      border-right: .64em solid #fff;
      border-top: .64em solid @green;
      border-left: .64em solid @green;
      border-bottom: .64em solid @green;
      border-radius: .63em;
      box-shadow: .64em .64em .32em -.3em rgba(255,255,255,.48);
    }    
    & > *:first-child {
      display: inline-block;
      position: static;
      text-align: left;
      font-size: .5em;
      line-height: 2.32em;
      height: 100%;
      float: left;
      clear: left;
    }
    &:not(.confirmed):not(:visited):not(.visited) > *:first-child { padding: 0 .56em 0 2.72em; }
    &.visited > *:first-child { padding: 0 .56em 0 2.48em; }
    &.confirmed > *:first-child { padding: 0 .56em 0 3.12em; }
    &:not(.visited) > *:first-child { color: @reactionColor; }
    [lang="en"] & {
      & > *:first-child:empty::after { content: "Follow"; }
      &.visited > *:first-child:empty::after { content: "Unfollow"; }
    }
    [lang="de"] & {
      & > *:first-child:empty::after { content: "Folgen"; }
      &.visited > *:first-child:empty::after { content: "Entfolgen"; }
    }
  }
  &.pay {
    overflow: hidden;
    &:hover:not(.visited.clicked) {
      border-color: @lightPurple;
    }
    &::before {
      content: "";
      background: #000;
      border-top: .2em solid @green;
      border-left: 1.5px solid lighten(@lightPurple, 16%);
      border-bottom: 1px solid lighten(@lightPurple, 16%);
      border-radius: 0;
      width: .2em;
      height: 1.3em;
      top: .2em;
      left: 1.4em;
      transform: skewY(40deg);
      box-shadow: .2em .25em 0 .44em @lightPurple;
    }
    &::after {
      top: .6em;
      left: .5em;
      font-family: Icons;
      content: ""; // \f15a, \f153 ...
      color: rgba(0,0,0,.32);
      line-height: .8em;
      transform: none;
      background: radial-gradient(farthest-corner at 0 .6em, rgba(255,255,255,.4) 0%, lighten(@yellow, 16%) 8%, @yellow 48%, @yellow 100%);
      width: .8em;
      height: .8em;
      border-radius: 50%;
      box-shadow: -1px 1px .05em 0 #fff,
        .05em -.05em .05em .1em rgba(255,255,255,.4),
        .4em -.4em .1em -.35em rgba(248,255,230,.6),
        0 0 0 .18em rgba(0,0,0,.1),
        0 0 0 .2em #E7E6E2;
    }
  }
  /* Indian Style Welcome */
  &.welcome {
    &:hover, &:active, &:visited, &.visited {
      border-color: @green;
    }
    &::after {
      content: "_/\\_";
      letter-spacing: -.01em;
      color: @lightGreen;
      transform: none;
      top: 0;
      left: 0;
    }
  }
  
  &.downvote{
    margin-right: 0 !important;
    border-radius: 50% 0 0 50%;
    &:hover:not(.visited.clicked), &:visited, &.visited {
      border-top: 2px solid @red;
      border-bottom: 2px solid @red;
      border-left: 2px solid @red;
    }
    &:not(.visited)::before {
      content: "";
      color: @red;
      transform: none;
      border-radius: .24em 0 0 .24em;
      background: @red;
      width: .6em;
      height: .62em;
      top: .82em;
      left: 1.6em;
    }
    &::after {
      .iconContent;
      content: "\f165";
      transform: scaleX(-1);
      top: .4em;
      left: -4px;
      text-align: left;
    }
    &:not(.visited)::after { color: #eee; }
    &.visited::after { color: @red; }
  }
  &.upvote {
    margin-left: -8px !important;
    border-radius: 0 50% 50% 0;
    &:hover:not(.visited.clicked) {
      border-top: 2px solid @green;
      border-bottom: 2px solid @green;
      border-right: 2px solid @green;
    }
    &:not(.visited)::before {
      content: "";
      color: @red;
      transform: none;
      border-radius: 0 .24em .24em 0;
      background: @green;
      width: .6em;
      height: .62em;
      top: .82em;
      left: 0;
    }
    
    &::after {
      .iconContent;
      content: "\f164";
      top: .18em;
      left: 4px;
      text-align: left;
      box-shadow: 0 0 0 -.1em @green;
    }
    &:not(.visited)::after { color: #eee; }
    &.visited::after { color: @green; }
  }
}

// REACTIONS : .reaction
/** smileys inspired by https://codepen.io/hari_shanx/pen/DujzJ **/
.eyes(@content:"o o") {
  content: @content;
  transform: none;
  font-size: .4em;
  transform: scaleY(.8);
  top: -.3em;
  line-height: 2;
}
.sunglasses {
  content: "`\25CF–\25CF´";
  transform: none;
  font-size: .5em;
  transform: scaleX(1.3333);
  letter-spacing: -.15em;
  top: -.4em;
  left: -.1em;
}
.sleeping {
  content: "~ ~";
  top: -.5em;
  transform: scaleX(.88);
}
.condensed { letter-spacing: -0.08em; }
.bigger { transform: rotate(90deg) scale(1.2); }
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
@keyframes rotate {
  0% {transform: rotate(0deg) rotateX(40deg);}
  100% {transform: rotate(360deg) rotateX(40deg);}
}

.reaction {
  border: 2px solid @reactionBorder;
  &:not(.indeterminate) {
    background: @reactionBackground;
  }
  &.indeterminate {
    background: fade(@reactionBackground, 48%);
  }
  &.rofl::before,
  &.indeterminate::before,
  &.indifferent::before,
  &.happy::before,
  &.smiling::before,
  &.moustache::before,
  &.kissing::before,
  &.kissed::before,
  &.undecided::before,
  &.wondering::before,
  &.displeased::before,
  &.unhappy::before, 
  &.sad::before,
  &.sarcastic::before,
  &.dumb::before,
  &.cheek::before,
  &.shouting::before,
  &.screaming::before,
  &.vampire::before,
  &.sigh::before,
  &.tongue_tied::before,
  &.tilt::before { 
    .eyes;
  }
  &.cool::before { .sunglasses; }
  &.laughing::before { .eyes("ö ö"); }
  &.surprised::before { .unicode; .eyes("o\0360 o");}
  &.nap::before, &.sleep::before { .sleeping; }
  &.confounded::before { .unicode; .eyes("o\0309 ,\0322 o\0309"); }
  &.wondering::before { .unicode; .eyes("o o\0322"); top: -.2em; }
  &.sceptical::before { .eyes("o\0360 o"); }
  &.fearful::before {
    .unicode;
    .eyes("o\0301  o\0300");
    margin: .05em;
    //background: linear-gradient(180deg, rgba(25,136,209,0.64) 16%,rgba(41,137,216,0.12) 16%,rgba(125,185,232,0) 32%);
  }
  &.smug::before { 
    .unicode; 
    .eyes("\25D3\030C \25D3\030C");
    font-size: .5em;
  }
  &.indeterminate::after{ content: "-|"; top: .32em; }
  &.indifferent::after{ content: "-|"; top: .2em; }
  &.happy:not(.moustache)::after { content: "-)"; }
  &.cool::after { content: "-]"; }
  &.smiling::after { content: "-))"; .condensed; }
  &.laughing::after { 
    content: "\00a0-D"; 
    top: .05em;
  }
  &.grinning::before {
    .unicode;
    .eyes("ò,\0322 ó");
    letter-spacing: .1em;
    line-height: 2.5em;
  }
  &.grinning::after {
    content: '';
    transform: none;
    width: 1.5em;
    height: .5em;
    left: .32em;
    top: 1.32em;
    background: @reactionColor;
    border-radius: 0 0 1em 1em;
  }
  &.winking::before { 
    .bigger;
    content: ";-)";
    left: .05em;
  }
  &.winking.right::before {
    transform: rotate(90deg) scale(1.2, -1);
    left: -.15em;
  }
  &.winking::after {
    content: "\00a0\00a0\25DD";
    transform: none;
    top: .4em;
    left: .2em;
  }
  &.moustache:not(.happy):not(.unhappy)::after { content:"-{"; }
  &.moustache.happy::after { content:"-{)"; }
  &.moustache.unhappy::after { content:"-{("; }
  &.kissing::after { content: "\00AF*"; top: .1em; left: .25em; font-size: 1em; letter-spacing:-.1em; transform: rotate(90deg) scale(1, -1); }
  &.kissed::after { .condensed; content: "-*)"; top: .2em; }
  &.nap::after { content: "-)"; }
  &.sleep::after { content: "-ì"; }
  &.undecided::after { content: "-\\"; }
  &.confounded::after {
    content: "W";
    top: .4em;
    transform: rotate(180deg) scaleY(.4);
  }
  &.wondering::after { 
    content: "?\00a0-/";
    top: -.2em;
  }
  &.sceptical::after { 
    content: "-/";
    transform: scale(.92) rotate(90deg);
    letter-spacing: -.1em;
  }
  &.fearful::after {
    content: "D-";
    transform: rotate(-90deg);
    left: -.025em;
//    width: 1.8em;
//    height: 1.8em;
//    background: red;
    border-radius:100%;
    box-shadow: .16em -.08em .08em -.32em @blue,
      .46em .48em .16em -.48em @blue;
  }
  &.displeased::after { content: "-/"; top: .35em; }
  &.disapproval::before { .eyes("ಠ ಠ"); font-size: .52em; }
  &.disapproval::after { content: "|"; }
  &.unhappy:not(.moustache)::after { content: "-("; }
  &.sad::after { content: "-(("; .condensed; }
  &.crying::before { content: ": ("; .bigger; left: .05em; }
    // TODO serif:
  &.crying::after {
    font-family: Georgia, "Times New Roman", Times, serif;
    content: "’";
    left: .4em;
    top: .1em;
    transform: none;
  }
  &.fail::before {
    content: "> <";
    top: -.5em;
    transform: scale(.84);
  }
  &.fail::after {
    content: "-\299A";
    font-size: .7em;
  }
  &.angry::before {
    content: "> <";
    top: -.5em;
    transform: none;
  }
  &.angry::after { content: "-("; }
  &.sarcastic::after{ content: "-s"; .bigger; }
  &.surprised::after { 
    content: "- o";
    letter-spacing: -.15em;
    top: .2em;
    left: .05em;
    .bigger;
  }
  &.dumb::after { content: "-X"; }
  &.cheek::after {
    content: "-P";
    transform: rotate(90deg) scaleX(.92);
  }
  &.partying::before {
    color: @orange;
    content: "<";
    .condensed;
    letter-spacing: -.5em;
    top: -1.6em;
    left: -.4em;
    transform: rotate(72deg) scale(1.2);
    z-index: 2;
  }
  &.partying::after { 
    content: "8-}"; 
    letter-spacing: -.04em;
    transform: rotate(96deg) scaleY(1.1);
    top: -.1em;
  }
  &.angel::before,
  &.evil::before { 
    content: ":-)"; 
  }
  &.angel::after {
    content: "\00a0";
    height: .8em;
    width: 1.5em;
    box-shadow: 1px -2px 0 rgba(255,255,255,.32);
    border-radius: 100%;
    border: .15em solid @yellow;
    left: .2em;
    top: -.6em;
    transform: rotateX(40deg);
    z-index: 2;
  }
  &.evil::after {
    color: @pink;
    content: "^^";
    letter-spacing: -.2em;
    left:-.2em;
    top: -.55em;
    transform: rotate(0deg) scaleX(2.4) scaleY(3);
  }
  &.shouting::after {
    content: "-{ }";
    transform: rotate(90deg) scaleX(0.76);
  }
  &.screaming::after {
    content: "-@";
  }
  &.vampire::after {
    content: "-E";
    transform: rotate(90deg) scaleX(0.76);
  }

  &.tongue_cheek::before { content: ":-\00a0"; .bigger; }
  &.tongue_cheek::after {
    content: "J";
    left: -.15em;
    top: .4em;
  }
  &.smug::after {
    content: "-<";
    left: .05em;
    top: .2em;
    transform: rotate(90deg) scaleY(1.25);
  }
  &.sigh::after {
    content: "->";
    left: .05em;
    transform: rotate(90deg) scaleY(1.25);
  }

  &.greedy::after {
    content: "-)";
  }
  &.greedy::before {
    content: "$ $";
    top: -.4em;
    transform: rotate(0deg) scale(0.75);
  }
  &.tongue_tied::after {
    content: "-&";
    transform: rotate(90deg) scale(0.96);
  }
  &.tilt:after {
    content: "!!!!";
    transform: none;
  }

  &.rofl {
    animation: rotate 2s reverse linear infinite;
    &::before {
      animation: spin 2s linear infinite;
    }
    &::after {
      .unicode;
      transform-origin: 50% 36% 0;
      content: " \25E1\0307";
      font-size: 1em;
      line-height: 1.4em;
      animation: spin 2s linear infinite;
    }
  }
  &.rofl.copter {
    &::before {
      animation: spin .4s linear infinite;
    }
    &::after {
      animation: spin .4s linear infinite;
    }
  }
  // borders
  &.cool,
  &.happy,
  &.smiling,
  &.laughing,
  &.grinning,
  &.winking,
  &.kissing,
  &.kissed,
  &.cheek,
  &.rofl {
    border-color: @green;
  }
  &.indifferent,
  &.surprised,
  &.undecided,
  &.nap,
  &.sleep,
  &.wondering,
  &.sceptical,
  &.moustache:not(.happy):not(.unhappy),
  &.confounded {
    border-color: @yellow;
  }
  &.fearful,
  &.fail,
  &.displeased,
  &.disapproval,
  &.unhappy,
  &.sad,
  &.crying,
  &.angry,
  &.crying,
  &.sarcastic {
    border-color: @red;
  }
}

              
            
!

JS

              
                /* just for the demo - 
// adding the .visited class should be the result of a succesful server response !!!
*/
(function(){
  var links = {
    reset: document.getElementById('reset'),
    confirm: document.getElementById('confirm'),
    notify: document.getElementById('notify'),
    empty: document.getElementById('empty'),
    mute: document.getElementById('mute')
  };
  var follow = document.getElementsByClassName('follow action')[0];
  var bell = document.getElementsByClassName('notify action')[0];
  var nCount = 0;
  /* like/unlike and follow/unfollow - Toggle visited */
  fakeVisited('like action', true);
  fakeVisited('follow action', true);
  /**/
  fakeVisited('upvote action', true, 'downvote action');
  fakeVisited('downvote action', true, 'upvote action');
  
  /* has not / has - Once visited */
  ['comment action', 'share action', 'pearls action', 'pay action'].forEach(fakeVisited);

  /* demo reset */
  links.reset.addEventListener('click', function(e){
    nCount = 0;
    follow.classList.remove('confirmed');
    bell.classList.remove('unread');
    bell.classList.remove('empty');
    bell.classList.remove('muted');
    var actions = document.getElementsByClassName('action');
    for(i=0; i < actions.length; i++) {
      actions[i].classList.remove('visited');
    }
  });
  
  /* confirm follow */
  links.confirm.addEventListener('click', function(e){
    follow.classList.add('confirmed');
  });

  /* do notify */
  links.notify.addEventListener('click', function(e){
    bell.classList.remove('unread');
    setTimeout(function(){bell.classList.add('unread')},4);
    nCount++;
    bell.firstChild.textContent = nCount;
  });
  /* empty notify */
  links.empty.addEventListener('click', function(e){
    bell.classList.remove('unread');
    bell.classList.add('empty');
    nCount = 0;
  });
  /* mute notify */
  links.mute.addEventListener('click', function(e){
    bell.classList.add('muted');
  });
  /* reset notify */
  bell.addEventListener('click', function(e){
    this.classList.remove('unread');
    nCount = 0;
  });

  /**/
  function fakeVisited(cssClass, toggle, removeClass) {
    var visits = document.getElementsByClassName(cssClass);
    var action = (toggle===true) ? 'toggle' : 'add';
    for(i=0; i < visits.length; i++) {
      visits[i].addEventListener('click', function(e){
        try {
          this.classList.add('clicked');
          this._mouseout = function(e){
            this.classList.remove('clicked');
            this.removeEventListener('mouseleave', this._mouseout);
          }.bind(this);
          this.addEventListener('mouseleave', this._mouseout);
        } catch(e){}    
        if (action === 'add') {
          this.classList.remove('visited');
        }
        var visitedState = function() {
          this.classList[action]('visited');
          if (this.classList.contains('visited') && typeof removeClass === 'string') {
            var removes = document.getElementsByClassName(removeClass);
            for(i=0; i < removes.length; i++) {
              removes[i].classList.remove('visited');
            }
          }
        }.bind(this)
        window.setTimeout(visitedState, 40);
      }, false); 
    }
  }
})();
              
            
!
999px

Console