A CodePen by ganshoot. leadtext & button

index.html

  
  <h3 class="xmajor spacer_tenth">In the next 3 minutes, you will help</h3>
<h2 class="major spacer_quarter"><span class="highlight ext_underline">Solve</span> the Water Crisis</h2>

<a class="button xwide" href="#slide/2" title="Let's Go">Let’s Go</a>

style.css

.button.xwide {
font-family: League, Arial, Helvetica, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
padding: 1em 2.66667em;
}

.button {

display: inline-block;
color: #fff;
border: 0;
font-size: 125%;
padding: 1em 1.16667em;
border-radius: 0.4em;
text-shadow: #0347aa 0.03333em 0.06667em;
letter-spacing: 0.06667em;
box-shadow: 0 0.16667em 0 0 #08338b,0 0.33333em 0.83333em 0 #000;
}

.button, #slide_spread_the_word_scrape aside, #slide_spread_the_word_scrape_2 aside {
background: #0081f3;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #0081f3 0%, #0b49c7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0081f3), color-stop(100%, #0b49c7));
background: -webkit-linear-gradient(top, #0081f3 0%, #0b49c7 100%);
background: -o-linear-gradient(top, #0081f3 0%, #0b49c7 100%);
background: -ms-linear-gradient(top, #0081f3 0%, #0b49c7 100%);
background: linear-gradient(to bottom, #0081f3 0%, #0b49c7 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0081f3', endColorstr='#0b49c7',GradientType=0 );
}

a, .link {
color: #fff;
text-decoration: none;
cursor: pointer;
}