Animated Arrow Icons With Pure CSS3

In this post we’re going to create some animated arrow icons using only CSS3. Designed and created by eMaj.

Playground

The Html

<h1>Pure CSS3 arrow icons</h1>
<div style="float:left">
<span class="arrow arrow-up"></span>
<span class="arrow arrow-right"></span>
<span class="arrow arrow-down"></span>
<span class="arrow arrow-left"></span>
<br>
<span class="arrow arrow-up curve-right"><span class="curve"></span></span>
<span class="arrow arrow-right curve-right"><span class="curve"></span></span>
<span class="arrow arrow-down curve-right"><span class="curve"></span></span>
<span class="arrow arrow-left curve-right"><span class="curve"></span></span>
<br>
<span class="arrow arrow-up curve-left"><span class="curve"></span></span>
<span class="arrow arrow-right curve-left"><span class="curve"></span></span>
<span class="arrow arrow-down curve-left"><span class="curve"></span></span>
<span class="arrow arrow-left curve-left"><span class="curve"></span></span>
</div>
<div style="float:left">
<span class="arrow arrow-animate">
  <span class="arrow-item"><span class="curve"></span></span>
  <i></i>
  <span class="arrow-item"><span class="curve"></span></span>
</span>
</div>

 The CSS

$blue-gray 			    : #34495e;
$blue-gray-darken 	: #2c3e50;
$blue 				      : #3498db;
$blue-darken 		    : #2980b9;
$green 				      : #1abc9c;
$green-darken 		  : #16a085;
*{
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}
body{
  text-align: center;
  background-color: $blue-gray;
}
h1{
  font-weight:100;
  font-size:32px;
  padding:40px;
  color:#fff;
}
#breadcrumb{
  list-style:none;
  display: inline-block;
  .icon{
    font-size: 14px;
  }
  li{
    float:left;
    a{
      color:#FFF;
      display:block;
      background: $blue;
      text-decoration: none;
      position:relative;
      height: 40px;
      line-height:40px;
      padding: 0 10px 0 5px;
      text-align: center;
      margin-right: 23px;
    }
    &:nth-child(even){
      a{
        background-color: $blue-darken;
        &:before{
          border-color:$blue-darken;
          border-left-color:transparent;
         }
        &:after{
          border-left-color:$blue-darken;
        }
      }
    }
    &:first-child{
      a{
        padding-left:15px;
        @include border-radius(4px 0 0 4px);
        &:before{
          border:none;
         }
      }
    }
    &:last-child{
      a{
        padding-right:15px;
        @include border-radius(0 4px 4px 0);
        &:after{
          border:none;
         }
      }
    }
    a{   
      &:before,
      &:after{
        content: "";
        position:absolute;
        top: 0;
        border:0 solid $blue;
        border-width:20px 10px;
        width: 0;
        height: 0;
      }
      &:before{
        left:-20px;
        border-left-color:transparent;
      }
      &:after{
        left:100%;
        border-color:transparent;
        border-left-color:$blue;
      }
      &:hover{
        background-color: $green;
        &:before{
          border-color:$green;
          border-left-color:transparent;
         }
        &:after{
          border-left-color:$green;
        }
      }
      &:active{
        background-color: $green-darken;
        &:before{
          border-color:$green-darken;
          border-left-color:transparent;
         }
        &:after{
          border-left-color:$green-darken;
        }
      }
    }
  }
}