<!-- Don't forget to import IcoMoon to use custom Icons -->

<a href="javascript:alert('button event');" title="Title">
 <div class="button button__orange button__large">
 <span class="icon-">&rarr;<!--&rarr; defines an HTML entity and stands for "Right Arrow", to use custom icons delete &rarr; and import icomoon (www.icomoon.io) with selected icons and in the span class add the name of your icon to the existing prefix "icon-'your-icon-here' " --></span><h5>LEARN MORE</h5>
</div>
</a>
<a href="javascript:alert('button event');" title="Title">
<div class="button button__orange button__medium button__icon--introduce">
 <span class="icon-">&rarr;</span><h5>LEARN MORE</h5>
</div>
</a>
<a href="javascript:alert('button event');" title="Title">
<div class="button button__orange button__small button__icon--hover">
  <span class="icon-">&rarr;</span><h5>LEARN MORE</h5>
</div>
</a>

<br>

<a href="javascript:alert('button event');" title="Title">
<div class="button button__ltBlue button__large">
 <span class="icon-">&rarr;</span><h5>LEARN MORE</h5>
</div>
</a>
<a href="javascript:alert('button event');" title="Title">
<div class="button button__ltBlue button__medium button__icon--introduce">
 <span class="icon-">&rarr;</span><h5>LEARN MORE</h5>
</div>
</a>
<a href="javascript:alert('button event');" title="Title">
<div class="button button__ltBlue button__small button__icon--hover">
  <span class="icon-">&rarr;</span><h5>LEARN MORE</h5>
</div>
</a>

<br>

<a href="javascript:alert('button event');" title="Title">
<div class="button button__dkBlue button__large">
 <span class="icon-">&rarr;</span><h5>LEARN MORE</h5>
</div>
</a>
<a href="javascript:alert('button event');" title="Title">
<div class="button button__dkBlue button__medium button__icon--introduce">
 <span class="icon-">&rarr;</span><h5>LEARN MORE</h5>
</div>
</a>
<a href="javascript:alert('button event');" title="Title">
<div class="button button__dkBlue button__small button__icon--hover">
  <span class="icon-">&rarr;</span><h5>LEARN MORE</h5>
</div>
</a>

<br>

<a href="javascript:alert('button event');" title="Title">
<div class="button button__grey button__large">
 <span class="icon-">&rarr;</span><h5>LEARN MORE</h5>
</div>
</a>
<a href="javascript:alert('button event');" title="Title">
<div class="button button__grey button__medium button__icon--introduce">
 <span class="icon-">&rarr;</span><h5>LEARN MORE</h5>
</div>
</a>
<a href="javascript:alert('button event');" title="Title">
<div class="button button__grey button__small button__icon--hover">
  <span class="icon-">&rarr;</span><h5>LEARN MORE</h5>
</div>
</a>

body {
  font-family:'Gotham',sans-serif;
}

a {
  text-decoration:none;
  color:inherit;
}

.button {
  height:50px;
  line-height:50px;
  text-align:center;
  display:inline-block;
  overflow:hidden;
  -webkit-transition:all 0.1s ease-in-out;
	-ms-transition:all 0.1s ease-in-out;
	-moz-transition:all 0.1s ease-in-out;
	-o-transition:all 0.1s ease-in-out;
	-apple-transition:all 0.1s ease-in-out;
	transition:all 0.1s ease-in-out;  
}

.button__icon--hover span {
    display:block;
    color:#fff;
}
.button__icon--introduce span {
  position:absolute;
  top:-50px;
  color:#fff;
  margin-left:-15px; /* Takes care of slight centering issue */
}

.button__icon--introduce:hover span {
  top:0px;
}

.button h5 {
  margin:0;
  padding:0;
  display:inline-block;
}

.button span {
  height:50px;
  padding-right:10px;
  margin-right:10px;
  margin-top:-50px;
  position:relative;
   -webkit-transition:all 0.1s ease-in-out;
	-ms-transition:all 0.1s ease-in-out;
	-moz-transition:all 0.1s ease-in-out;
	-o-transition:all 0.1s ease-in-out;
	-apple-transition:all 0.1s ease-in-out;
	transition:all 0.1s ease-in-out;
}

.button__orange {
  border:3px solid #ff6d10;
  color:#000;
}

.button__orange:hover {
  background-color:#ff6d10;
  color:#fff;
}

.button__ltBlue {
  border:3px solid #0ca7e0;
  color:#000;
}

.button__ltBlue:hover {
  background-color:#0ca7e0;
  color:#fff;
}

.button__dkBlue {
  border:3px solid #003a70;
  color:#000;
}

.button__dkBlue:hover {
  background-color:#003a70;
  color:#fff;
}

.button__grey {
  border:3px solid #3d4543;
  color:#000;
}

.button__grey:hover {
  background-color:#3d4543;
  color:#fff;
}


.button__icon--hover:hover span {
  margin-top:0;
}

.button__large {
  width:450px;
  margin:auto;
}

.button__medium {
  width:350px;
  margin:auto;
}

.button__small {
  width:250px;
  margin:auto;
}