A CodePen by Tim Pietrusky. webdesign tuts+ - Please hover :D The font I used is not the right one, but I don't know the original one.

index.html

<h1>webdesign tuts+</h1>

script.js

/**
  webdesigntuts+ logo
  
  Please hover :D
  
  Logo by http://webdesign.tutsplus.com/
  
  The font I used is not the right one, but I don't know 
  the original one. 
  
  # 2013 by Tim Pietrusky
  # timpietrusky.com
**/

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Sanchez);

$color-alpha: #124333;
$color-beta: #1b6b52;
$color-gamma: #c93350;
$color-delta: #297326;
$stop-alpha: 67%;
$stop-beta: 100%;
$font-size-alpha: 4em;

body {
  position:relative;
  font-size:1em;
  text-align:center;
  margin-top:.5em;
  background:#23282B;
  margin:0;
  
  &:before {
    position:absolute;
    z-index:-1;
    left:0;
    top:0;
    content:'';
    height:8.5em;
    width:100%;
    background:#1B1E1F;
  }
}

h1 {
  word-spacing: .145em;
  text-align:center;
  padding:.25em .2em;
  display:inline-block;
  font: bold $font-size-alpha 'Sanchez', sans-serif;
  color:#fff;
  @include background(
     linear-gradient(left, $color-alpha $stop-alpha, $color-beta $stop-alpha)
  );
  background-size:100%;
  background-position:100% 100%;
  @include backface-visibility(hidden);
  
  @include transition(
    word-spacing .25s ease-in,
    background-size .25s .15s ease-out,
    background-position .25s .15s ease-out,
    box-shadow .25s .15s ease-in-out,
    transform .35s ease-in-out
  );
  
  &:hover {
    word-spacing:.425em;
    background-size:200%; 
    background-position:-66% 100%;
    box-shadow: 
      0 0 0 .25em rgba($color-gamma, .2),
      /*inset -5.65em 0 0 .115em rgba($color-gamma, .9),*/
       /* inset -2.8em 0 0 .115em rgba($color-gamma, .9),*/
      inset 0 0 0 2.5em rgba($color-gamma, .75)
    ;
      
    @include transform (rotate(3.5deg));
  }
}