CodePen

HTML

            
              <div class="sharing-links">
  <a href="#" class="tweet-this">Tweet this<span class="after"></span></a>
  <a href="#" class="facebook-this">Share on Facebook<span class="after"></span></a>
  <a href="#" class="email-this">Send to a friend<span class="after"></span></a>
</div>
            
          
!

CSS

            
              $blue: #31c1dc;
$lightblue: #04e1f2;
$darkblue: #198ea1;

$grey: #c3c4c8;
$lightgrey: #ebebeb;

$white: #fff;
$text: #5d5d5d;

body {background: #ccc;}

.sharing-links {
  width: 700px;
  margin: 50px auto;
    a {
        display: inline-block;
        @include box-sizing(border-box);            
        padding: 5px 0;
        margin: 0;
        font-family: calibri, arial, sans-serif;
        color: $text;
        text-decoration: none;
        border: 1px solid $text;
        @include border-radius(3px);
        @include box-shadow(0 2px 3px 0 rgba(black, 0.2));
        width: 200px;
        margin-left: 2%;
        text-align: center;
        position: relative;
        z-index: 1;
        overflow: hidden;
        &:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: white;
            z-index: -1;
        }
        span.after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            z-index: -1;
            width: 10px;
            height: 35px;
            background: $blue;
            @include background-image(linear-gradient(360deg, $blue 0%, $darkblue 100%));
            @include transition(width 0.25s ease);
        }        
        &:first-child {
            margin-left: 0;
        }
        &:hover {
            color: $white;
            span.after {
                width: 100%;
            }            
        }
    }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Can't transition after element so having to use a span.after instead. MAKES ME SUPER SAD :(
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................