CodePen

HTML

            
              
<a href="http://www.df.eu/blog/2013/01/17/leserwahl-open-source-projekt-fur-lebenslanges-gratis-hosting-gesucht/#polls-2" target="_blank">
  
  <h1>
    V<span class="fontawesome-bullhorn"></span>TE for 
    <br>
    We <span class="fontawesome-heart"></span> Icon Fonts
  </h1>
  
  <br>
</a>

<div>
  I need your help! A <span>free lifetime hosting</span> is waiting for <span>one of 5</span> open-source projects. So please use the button above, vote for <span>We Love Icon Fonts</span> and be a <span>hero</span>.
  
  <br><br>
  
  The button brings you to the poll of a big German hosting company called <span>domainFACTORY</span>.
  
  <br><br>
  
  If you want some informations in English you can read my <a href="http://timpietrusky.com/vote-for-we-love-icon-fonts" target="_blank">blog post</a>. 
  
  <br><br>
  
  <span>Thanks!</span>
</div>
            
          
!
via HTML Inspector

CSS

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

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

body {
  background:url(http://subtlepatterns.com/patterns/wood_pattern.png);
}

h1 {
  position:absolute;
  width:15em;
  height:7.5em;
  margin:0;
  top:-2.75em;
  left:50%;
  margin:0 0 0 -7.5em;
  font: bold 1.95em/1.5em sans-serif;
  color:#347590;
  text-transform:uppercase;
  letter-spacing:.075em;
  text-align:center;
  padding:7.5em 0 0 0;
  @include transition(color .15s ease-in-out);
  
  &:before,
  &:after {
    position:absolute;
    content:'';
    width:15em;
    height:7.5em;
    top:10.25%;
    left:0;
    z-index:-1;
    padding:7.5em 0 0 0;
    border-radius:50%;
    @include transform(scale(.8, .8));
  }
  
  &:before {
    background: 
      linear-gradient(top, rgba(255, 255, 255, .25) 0, rgba(255, 255, 255, 0) 33%),
      linear-gradient(top, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .25) 100%),
      linear-gradient(top, #18406f 33%, #ffffff 33%, #ffffff 66%, #c40a10 66%, #c40a10 100%)
    ;
  
    box-shadow:
      inset 0 0 0 .25em rgba(255, 255, 255, 1),
      inset 0 0 .65em .1em rgba(0, 0, 0, 1),
      inset 0 0 0 .5em rgba(255, 255, 255, .75)
    ;
  }
  
  &:after {
    top:15.5%;
    left:.75em;
    width:13em;
    height:5.5em;
    border:.25em dashed rgba(255, 255, 255, .5);
    background:rgba(255, 255, 255, .1);
  }
}

a {
  position:relative;
  text-decoration:none;
  
  &:hover {
    > h1 {
      color:#c40a10;
      @include transform(rotate(15deg) scale(1.25, 1.25));
    }
  }
}

div {
  position:absolute;
  top:60%;
  z-index:-2;
  padding:5em;
  color:#347590;
  font: 2em sans-serif;
  
  a {
    color:#000;
    font-weight:bold;
    @include transition(color .25s ease-in-out);
    
    &:hover {
      color:#c40a10;
    }
  }
  
  span {
    color:#c40a10;
    font-weight:bold;
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
               /**
  Vote for We Love Icon Fonts
  
  # What? #
  I need your help! A free lifetime hosting is waiting 
  for one of 5 open-source projects. So please use the button, 
  vote for We Love Icon Fonts and be a hero. 
  http://www.df.eu/blog/2013/01/17/leserwahl-open-source-projekt-fur-lebenslanges-gratis-hosting-gesucht/#polls-2

  The button brings you to the poll of a big German hosting company
  called domainFACTORY.

  If you want some informations in English you can read my blog post
  http://timpietrusky.com/vote-for-we-love-icon-fonts

  Thanks!

  # 2013 by Tim Pietrusky
  # timpietrusky.com
**/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................