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

Animated Arrow Icons With Pure CSS3

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;
        }
      }
    }
  }
}

You Might Be Interested In:

Tags: