<div class="columns">
<div class="block-button button-style1">
  <a href="#" class="button">
    <span class="ico ion-ios-star-outline"></span>
  </a>
</div>

<div class="block-button button-style2">
  <a href="#" class="button">
    <span class="ico ion-ios-lightbulb-outline"></span>
  </a>
</div>

<div class="block-button button-style3">
  <a href="#" class="button">
    <span class="ico ion-ios-camera-outline"></span>
  </a>
</div>

<div class="block-button button-style4">
  <a href="#" class="button">
    <span class="ico ion-ios-telephone-outline"></span>
  </a>
</div>

<div class="block-button button-style5">
  <a href="#" class="button">
    <span class="ico ion-ios-alarm-outline"></span>
  </a>
</div>

<div class="block-button button-style6">
  <a href="#" class="button">
    <span class="ico ion-ios-email-outline"></span>
  </a>
</div>

<div class="block-button button-style7">
  <a href="#" class="button">
    <span class="ico ion-ios-location-outline"></span>
  </a>
</div>
  
<div class="block-button button-style8">
  <a href="#" class="button">
    <span class="ico ion-ios-timer-outline"></span>
  </a>
</div>

</div>
@import 'lesshat';

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Raleway:400);
body {
  background: #313131;
  font-family: Raleway, Arial, sans-serif;
  font-size: 15px;
}
* {
  .box-sizing(content-box);
  .transition(all 0.4s linear);
  margin: 0;
  padding: 0;
}
.columns {
   display: flex;
  &.two .block-button {
    a {.border-radius(2px) !important;}
    .ico {font-size: 1.5rem;}
    .txt {margin-left: 10px;}
  }
}

.block-button {
  margin: 40px;
    a {
      width: 80px;
      height: 80px;      
      .border-radius(50%);
      color: #fff;
      text-decoration: none;     
      display: flex;
      align-items: center;
      .box-sizing(border-box);
      position: relative;
      .ico {        
        font-size: 2.8rem;
        display: block;
        text-align: center;
        margin: auto;
      }
      &:hover {
        .ico {}
      }
    }
  
  &.button-style1, &.button-style9 {
    a {
      &:after {
          background: #123851;
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          .box-sizing(border-box);
          border: 4px solid #2980b9;
          content: '';
          z-index: -1;
          .border-radius(50%);
      }
      &:hover:after {
          border-color: transparent;
          animation: spinning cubic-bezier(0.18, 0.14, 0.29, 1) 1s;
          border-right-color: #2980b9;
          border-left-color: #2980b9;
          border-top-color: #ffffff !important;
          border-bottom-color: #ffffff !important;
      }
    }
    .keyframes(~'spinning, 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);}');
  }
  
  
  &.button-style2 {
    a {
      background: #27ae60;
      border: 4px solid #3dd37c;
      
      &:hover .ico {
        text-shadow: 4px 4px 4px rgba(0,0,0,0.4);
      }
    }
    &:hover {
      .drop-shadow(1px 4px 4px rgba(0,0,0,0.4));
    }
  }
  
  &.button-style3 {
    a {
      background: #c0392b;
      border: 4px solid #e74c3c;
      
      &:hover .ico {
      }
    }
    &:hover {
      .translateY(-8%);
    }
  }
  
  &.button-style4 {
    position: relative;
    a {
      border: 4px solid #9b59b6;
    }
    &:after {
      background: #8e44ad;
      position: absolute;
      top: 0;
      left: 0;        
      .box-sizing(border-box);
      height: 100%;
      width: 100%;        
      content: '';
      z-index: -1;
      .border-radius(50%);
      .transition(all 0.4s linear);
      }
     
     &:hover:after {
       .rotateY(180deg);
       opacity: 0;
      }

  }
  
    &.button-style5 {
    position: relative;
    a {
      border: 4px solid #e67e22;
    }
    &:after {
      background: #d35400;
      position: absolute;
      top: 0;
      left: 0;        
      .box-sizing(border-box);
      height: 100%;
      width: 100%;        
      content: '';
      z-index: -1;
      .border-radius(50%);
      .transition(all 0.4s linear);
      }
     
     &:hover:after {
       .scale(0);
       opacity: 0;
      }

  }

  &.button-style6 {
    a {
      background: #f39c12;
      border: 4px solid #f1c40f;
      .ico {
        .transition(all 0.2s linear);
      }
      
      &:hover .ico {
        .scale(4);
        opacity: 0;
      }
    }
    &:hover {}
  }
  
  &.button-style7 {
    a {
      background: #16a085;
      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .box-sizing(border-box);
        .border-radius(50%);
        border: 4px solid #1abc9c;
        .transition(all 0.2s linear);
      }
      .ico {}
      
      &:hover:after {
        .scale(2);
        opacity: 0;
      }
    }
    &:hover {
      
    }
  }
  
   &.button-style8 {
     overflow: hidden;
    a {
      background: #7f8c8d;
      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .box-sizing(border-box);
        .border-radius(50%);
        border: 4px solid #95a5a6;
        
      }
      .ico {
        .transition(all 0.2s linear);
      }
      
      &:hover:after {
      }
    }
    &:hover {
      .ico {
        opacity:0;
        .transform(skewX(-40deg) translateX(200px));
      }
      
    }
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.