button_hover_reveal.scss

button_hover_reveal.scss

/** Body CSS sample **/
body {   
   background:rgb(255, 247, 233);
}
/** Flatted button %placeholder **/
%btn-flat {
   border-radius: 0rem;
}
/** Rounded button **/
.btn-rounded {
   border-radius: 5rem;
}
/** Button Iconed **/
.btn {
 &-iconed {
   transition: .15s ease-in-out;
   padding-left: 1.3rem;
   padding-right: 1.5rem;
   /** Icons Classes **/
   /** -- Open Iconic, Font Awesome -- **/
   [class~=oi], [class~=fa],
   /** -- Since Material, Iconic and Typicons use ::before -- **/
      [class~=typcn]::before,
      [class~=mdi]::before, 
      [class~=icon]::before {
         opacity: 0;
         transform-origin: left right;
         transform: translateX(-10px) scale(1.25);
         transition: .15s ease-out;
  }
  /** Span Class **/
  [class=spn] {
      position: relative;
      left:-9px;
      transform-origin: left right;
      transform: translateX(-9px);
      transition: .20s ease-in-out;
  }
   /** -- Icons on Hover properties -- **/
  &:hover {
   [class~=oi], [class~=fa],
   /** -- Since Material, Iconic and Typicons use ::before -- **/
   [class~=mdi]::before, [class~=icon]::before, [class~="typcn"]::before {
       opacity: 1;
       transform: translateX(0px) scale(.75);
   }
   /** -- Span on Hover properties -- **/
   [class=spn] {
       left:0px;
   }
  }
  /** Flatted button **/
  &.btn-flat {
     @extend %btn-flat;
  }
 }
}