<article>
  <section id="part-one">
    <h1>CodePen Challenge</h1>
    <p>Hover over the title above. You’ll see a link appear. We want you to style that link! The markup for each title and link, just so you know, looks like this: 
    <pre>
    &lt;h1&gt;
      &lt;span&gt;Codepen Challenge&lt;/span&gt;
      &lt;a href="#part-one"&gt;#part-one&lt;/a&gt;
    &lt;/h1&gt;</pre></p>
  <p>Make sure you retain the <a href="https://codepen.io/tag/tutplus/">tutsplus</a> tag on your pen so we can identify it–good luck!</p>
  </section>
  <section id="part-two">
    <h1>Here’s another part of the article</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero consequuntur, voluptatem ducimus eligendi corporis, expedita quidem suscipit beatae harum ab illum autem consectetur aliquid ullam rerum et debitis alias ipsam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam vero porro recusandae, minus possimus dolorum placeat quas nihil quod cumque ipsa ratione magni? Error autem repudiandae incidunt ducimus inventore velit?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam facere suscipit cumque, totam, nisi unde nobis, libero ipsum non ad nostrum eligendi! Saepe quidem beatae, cupiditate rem explicabo repellat. Nulla!</p>
  </section>
  <section id="part-three">
    <h1>Here’s yet one more</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo perferendis dicta voluptas adipisci ratione saepe facere hic deleniti illo ipsa iste cum, incidunt iure eum nobis aliquam, id quod porro.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae blanditiis, expedita deserunt ipsam. Esse nostrum placeat culpa impedit harum, architecto at, inventore quidem aliquam natus nisi libero deleniti nesciunt expedita.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa nulla alias tempore ipsam odio ullam asperiores, eveniet repellat. Impedit laudantium in tempore veniam sed ratione ipsam sint tenetur nisi, officiis.</p>
  </section>
</article>
@import url(https://fonts.googleapis.com/css?family=Raleway);

$color1: #2C0E44;
$color2: #2F1E38;
$color3: #FAAC6B;
$color4: #AF2235;
/* these are some base styles which you can ignore */
body{
  font:100%/1.5 sans-serif;
  font-family: 'Raleway', sans-serif;
  color: $color3;
  background-color: $color2;
}
article{
  width:90%;
  margin:0 auto;
  color: lighten($color3, 10%);
}
pre{
  background: lighten($color2, 10%);
  color: lighten($color3, 10%);
  padding:1em 0;
}

/* this is where we start styling.. make any changes you like! */

h1 {
    color: $color3;
}

a {
  color: lighten($color3, 15%);
}
h1 a.challenge {
  background-color:#520E27;
  position:relative;
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size:19px;
  padding-top:3px;
  padding-bottom:3px;
  padding-right:20px;
  padding-left:35px;
  margin-left:20px;
  border-right: 1px solid $color4;
  border-left: 5px solid $color4;
  opacity: 0;
  color: #AF2235;
  text-decoration: none;
  
  transition: all ease-in-out 0.2s;
  
  &:after, &:before {
    position: absolute;
    content: "";
    width: 8px;
    height: 12px;
    border-radius: 6px;
    opacity:0;
    border: 2px solid lighten($color4, 5%);
  }
  &:after {
    left: 10px;
    top:9px;
  }
  &:before {
    left: 18px;
    top:3px;
  }
}

h1:hover a.challenge {
    animation: text-animation 0.4s forwards reverse;
    opacity:1;
    
    &:after, &:before {
      animation: link-animation 0.4s linear 0.3s forwards;
    }
}

@keyframes link-animation {
    5% {
      transform: rotate(-30deg) scale(0);
      opacity:0;
    }
    50% {
      transform: rotate(75deg) scale(1.2);
    }
    100% {
      transform: rotate(40deg) scale(1);
      opacity:1;
    }
}

@keyframes text-animation {
    0% {
      padding-left:35px;
    }
    50% {
      padding-left:60px;
    }
    100% {
      padding-left:25px;
    }
}
View Compiled
$('article section').each(function(i,el){
  var id = $(this).attr('id');
  var h1 = $(this).find('h1').first();
  var t = h1.text();
  h1.html("<span>" + t + "</span>");
  h1.append("<a class='challenge' href='#"+id+"'>"+id+"</a>");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js