Generated by SassMeister.com.

SassMeister-input-HTML.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/AnimatedButtons/css/style7.css">


<a href="#teste1" id="teste1" class="buttom">
  <span class="a-btn-symbol cu">J</span>
  <span class="buttom__text">Esse é meu time</span>
</a>
<a href="#teste2" id="teste2" class="buttom" data-tooltip="piroca" >
  <span class="a-btn-symbol cu">J</span>
  <span class="buttom__text">Esse é meu time</span>
</a>

<div class="tooltip">teste</div>
<div class="tooltip tooltip--branding">teste</div>
<div class="tooltip tooltip--notification">teste</div>
<div class="tooltip tooltip--red">teste</div>
<div class="tooltip tooltip--ye">teste</div>
<div class="tooltip tooltip--social">teste</div>
<script>
  
</script>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----

* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  }
  a {text-decoration:none;}
  .cu {
    position: inherit !important;
  }
  body {
    margin-top:100px;
    background: whitesmoke;
  }
  @mixin tooltip-modifier($name, $bg, $color:false){
    .tooltip--#{$name} {
      background:$bg;
      @if $color {
        color: $color;
      }
      @content;
      &::before {
        border-top-color:$bg;
      }
    }
  }

  .tooltip {
    background: #000;
    border-radius:10px;
    display:inline;
    color:white;
    position: relative;
    padding:10px;
    &::before {
      content:"";
      display:block;
      position:absolute;
      left:5px;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #000;
    }
  }
  @include tooltip-modifier(notification,#50BC37); 
    @include tooltip-modifier(branding,#FF7212); 
  @include tooltip-modifier(red,#D72007); 
  @include tooltip-modifier(ye,#FFCE1E, black); 
  @include tooltip-modifier(social,#245BE7); 
  
.buttom {
  
  
  background: white;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius:25px;
  transition: box-shadow .2s;
  border-bottom: 2px solid #ccc;
  font-size: 14px;
  &:hover {
   box-shadow: 1px 1px 2px 1px rgba(224, 224, 224, 1);
  }
  &:active {
    border-top: 2px solid #ccc;
    border-bottom: 0;
  
  }
  &__text {
    display:inline-block;
    max-width:300px;
    transition:max-width 1s ease;
    white-space:nowrap;
    overflow: hidden;
    vertical-align: middle;
  }
  .a-btn-symbol{
    vertical-align: middle; }
  &:target &__text ,
  &.closed &__text {
    max-width:0;
  }
  
}

SassMeister-output.css

* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

a {
  text-decoration: none;
}

.cu {
  position: inherit !important;
}

body {
  margin-top: 100px;
  background: whitesmoke;
}

.tooltip {
  background: #000;
  border-radius: 10px;
  display: inline;
  color: white;
  position: relative;
  padding: 10px;
}
.tooltip::before {
  content: "";
  display: block;
  position: absolute;
  left: 5px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000;
}

.tooltip--notification {
  background: #50bc37;
}
.tooltip--notification::before {
  border-top-color: #50bc37;
}

.tooltip--branding {
  background: #ff7212;
}
.tooltip--branding::before {
  border-top-color: #ff7212;
}

.tooltip--red {
  background: #d72007;
}
.tooltip--red::before {
  border-top-color: #d72007;
}

.tooltip--ye {
  background: #ffce1e;
  color: black;
}
.tooltip--ye::before {
  border-top-color: #ffce1e;
}

.tooltip--social {
  background: #245be7;
}
.tooltip--social::before {
  border-top-color: #245be7;
}

.buttom {
  background: white;
  padding: 10px 20px;
  margin: 0 10px;
  border-radius: 25px;
  transition: box-shadow .2s;
  border-bottom: 2px solid #ccc;
  font-size: 14px;
}
.buttom:hover {
  box-shadow: 1px 1px 2px 1px #e0e0e0;
}
.buttom:active {
  border-top: 2px solid #ccc;
  border-bottom: 0;
}
.buttom__text {
  display: inline-block;
  max-width: 300px;
  transition: max-width 1s ease;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
}
.buttom .a-btn-symbol {
  vertical-align: middle;
}
.buttom:target .buttom__text, .buttom.closed .buttom__text {
  max-width: 0;
}

SassMeister-rendered.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/AnimatedButtons/css/style7.css">


<a href="#teste1" id="teste1" class="buttom">
  <span class="a-btn-symbol cu">J</span>
  <span class="buttom__text">Esse é meu time</span>
</a>
<a href="#teste2" id="teste2" class="buttom" data-tooltip="piroca" >
  <span class="a-btn-symbol cu">J</span>
  <span class="buttom__text">Esse é meu time</span>
</a>

<div class="tooltip">teste</div>
<div class="tooltip tooltip--branding">teste</div>
<div class="tooltip tooltip--notification">teste</div>
<div class="tooltip tooltip--red">teste</div>
<div class="tooltip tooltip--ye">teste</div>
<div class="tooltip tooltip--social">teste</div>
<script>
  
</script>