<h1>Bootstrap Animated Buttons</h1>
<h4>a very simple demo to display hidden text on hover.</h4>
<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <p class="text-muted">Hover Over Buttons</p>
  
      <!-- demo starts here -->

      <p>
        <a class="btn btn-info btn-sm btn-collapsible"><i class="fa fa-cloud-download"></i> <span>Download</span></a>
        <a class="btn btn-success btn-sm btn-collapsible"><i class="fa fa-check"></i> <span>Publish</span></a>
      </p>
      <p>
        <a class="btn btn-info btn-collapsible"><i class="fa fa-cloud-download"></i> <span>Download</span></a>
        <a class="btn btn-success btn-collapsible"><i class="fa fa-check"></i> <span>Publish</span></a>
      </p>
      <p>
        <a class="btn btn-info btn-lg"><i class="fa fa-cloud-download"></i> <span>Download</span></a>
        <a class="btn btn-success btn-lg"><i class="fa fa-check"></i> <span>Publish</span></a>
      </p>
      
      <!-- demo ends here -->
      
    </div>
  </div>
</div>

@mixin transition($settings) {
  -webkit-transition: $settings;
  -moz-transition: $settings;
  -ms-transition: $settings;
  -o-transition: $settings;
  transition: $settings;
}

.btn-collapsible {
  overflow: hidden;
  @include transition(all 500ms ease-in-out);
  max-width: 40px;
  white-space: nowrap;
  &.btn-sm {
    max-width: 34px;
  }
  &.btn-lg {
    max-width: 50px;
  }
  span {
    opacity: 0;
    text-indent: -6px;
    display: inline-block;
    @include transition(all 500ms ease-in-out);
  }
  &:hover {
    max-width: 300px;
    @include transition(all 300ms ease-in-out);
    span {
      opacity: 1;
      text-indent: 0px;
      @include transition(all 300ms ease-in-out);
    }
  }
}








/* Demo Related Styles */
body {
  background-color: #5c4084;
  margin: 50px;
}
.container {
  background-color: #fff;
  padding: 40px 80px;
  border-radius: 8px;
  text-align: center;
}
h1 {
  color: #fff;
  font-size: 4rem;
  font-weight: 900;
  margin: 0 0 5px 0;
  background: -webkit-linear-gradient(#fff, #999);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}
h4 {
  color: lighten(#5c3d86,30%);
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  margin: 0 0 35px 0;
}