A CodePen by Tim Pietrusky. Icon Fonts - Enhanced lists - For my article [5 Use Cases for Icon Fonts](http://css-tricks.com/five-use-cases-for-icon-fonts/) on CSS-Tricks.

index.html

<div>
  <h2>Stuff you love</h2>
  <ul class="love">
    <li data-text="1">CodePen</li>
    <li data-text="3">GitHub</li>
    <li data-text="37">SoundCloud</li>
  </ul>
</div>

<div>
  <h2>Downloads</h2>
  <ul class="downloads">
    <li data-text="13.37 GB">
      Appliness 
      <button class="fontawesome-download-alt"> get this file</button>
    </li>
    <li data-text="42 MB">
      Sublime Text
      <button class="fontawesome-download-alt"> get this file</button>
    </li>
    <li data-text="8 KB">
      Google Chrome
      <button class="fontawesome-download-alt"> get this file</button>
    </li>
    <li data-text="666 TB">
      Windows 9
      <button class="fontawesome-download-alt"> get this file</button>
    </li>
  </ul>
</div>
    
<div>
  <h2>Your account</h2>
  <ul class="account">
    <li>Loved</li>
    <li>Friends</li>
    <li>Comments</li>
    <li>Settings</li>
    <li>Logout</li>
  </ul>
</div>

script.js

 /**
  Icon Fonts - Enhanced lists
  
  # What? #
  For my article "5 Use Cases for Icon Fonts" on CSS-Tricks. 
  http://css-tricks.com/five-use-cases-for-icon-fonts

  # 2012 by Tim Pietrusky
  # timpietrusky.com
**/

style.scss

@import "compass";
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
 height:100%;
 width:100%;    
 overflow:hidden;
 background:#fff;
 margin:.5em;
 font:1em sans-serif;
}

div {
  float:left;
  width:33%;
  padding:0 .5em;
}

h2 {
  margin:.75em 0 .55em 0;
}

ul {
  width:100%;
  list-style:none;
  padding:0;
    
  li {
    position:relative;
    min-height:2em;
    padding:.3em .3em .3em 1.5em;
    transition:
      background .3s ease-in-out, 
      color .3s ease-in-out, 
      box-shadow .1s ease-in-out, 
      height .25s ease-in-out
    ;
    
    button {
      position:absolute;
      left:1.45em;
      bottom:.35em;
      opacity:0;
      height:0;
      background:rgba(255, 255, 255, .7);
      border:none;
      font-size:.8em;
      cursor:pointer;
      transition:all .4s ease-in-out;
    }
    
    &:before {
      position:absolute;
      top:.425em;
      font-family: 'FontAwesome', sans-serif;
      margin:0 .35em 0 -1.35em;
      vertical-align:bottom;
    }

    &:hover {
      color: rgba(255, 255, 255, .8);
      padding-left:1.5em;
    
      button {
        opacity:1;
        height:2em;
      }
      
      &:before {
        color: rgba(255, 255, 255, 1);
        right: 0;
        transform:scale(2.5, 2.5) translate(-.25em, .15em);
      }

      &:after {
        position:absolute;
        text-align:center;
        content:attr(data-text);
      }
    }
  }
}

.love {
  li {  
    &:before {
      content: "\f004";
    }

    &:before, 
    &:after {
      color:rgba(220, 20, 20, .6);
    }

    &:hover {
      background: rgba(220, 20, 20, .6);
    
      &:after {
        width:2em;
        text-align:center;
        right: .445em;
      }
    }
  }
}

.downloads {
  li {
    border-bottom: .15em solid rgba(0, 0, 0, .3);
    
    &:before {
      content: "\f019";
      color: rgba(50, 50, 50, .5);
    }

    &:hover {
      background: rgba(0, 140, 0, .7);
      height: 4em;
    
      &:after {
        text-align: center;
        right: .35em;
      }
      
      &:before {
        color: rgba(255, 255, 255, .2);
      }
    }
  }
}

.account {
  padding: .75em;
  border: .15em solid rgba(0, 0, 0, .2); 
  background-color: rgba(0, 0, 0, .7);
  background-image: radial-gradient(center, ellipse cover, rgba(104,104,104,0.6) 0%,rgba(23,23,23,0.7) 100%);
  box-shadow: inset 0 0 .35em 0 rgba(0, 0, 0, .2);
  color: rgba(255, 255, 255, .6);
  backface-visibility: hidden;
    
  li {  
    cursor:pointer;
        
    &:nth-child(1):before {
      content: "\f08a"; 
    }

    &:nth-child(2):before {
      content: "\f000"; 
    }

    &:nth-child(3) {
      margin-bottom: 1em;
      
      &:before { 
        content: "\f075"; 
      }
    }

    &:nth-child(4) {
      margin-bottom: .5em;
      
      &:before {
         content: "\f013"; 
      }
    }

    &:nth-child(5):before {
      content: "\f08b";
    }
    
    &:hover {
      color: rgba(255, 255, 255, 1);
      padding-left: 1.5em;
      box-shadow: inset 0 0 0 10em rgba(255, 255, 255, .5);
    
      &:before {
        color: rgba(255, 255, 255, 1);
        transform: none;
      }   
    }
  }        
}