<section>
    <div class="container-fluid">
        <div class="row">
            <div class="mx-auto">
                <h1 class="heading display-3">Ghost story</h1>                
                <div class="stage-ghost">
                    <button type="button" class="btn btn-outline-danger btn-block btn-lg btn-ghost shadow">
                      <i class="mdi mdi-ghost display-1"></i>
                      <div class="stage-ghost-text text-danger">
                        <div class="text-ghost">This is a ghost button..</div>
                        <div class="text-no-ghost">This is a no ghost button</div>
                        <div class="text-end-ghost">The end...</div>
                      </div>
                    </button>
                </div>                
            </div>
        </div>
    </div>
</section>

@import url('https://fonts.googleapis.com/css?family=Nothing+You+Could+Do');
body {
    background:#f5f5f5;
}
section {
    margin:3rem auto 1.75rem auto;
}
.heading {
    font-family: 'Nothing You Could Do', cursive;
}
.text-no-ghost, .text-end-ghost {
    opacity:0;
}
.text-ghost { 
    transition: .85s ease;
}
.text-end-ghost {
    transition: .95s ease;
}
.mdi-ghost {
  &:before {
    transition:.95s ease;
  }
}
.btn-ghost {
  transition:1s ease;
  border-radius:5rem;
  border-width:.175rem;
  &:hover {
    .mdi-ghost {
      &:before {
        content: "\F9F4";
        transform: rotate(360deg) scale(1.25);
      }
    }
    .text-ghost {
      transition-delay: .05s;
      opacity:0;
    }
    .text-no-ghost {
      animation: let-me-in 2.85s;
    }
    .text-end-ghost {       
      transition-delay: 1.95s;
      opacity:1;  
    }
  }
}  
.text-ghost, .text-no-ghost, .text-end-ghost {
    // Positioning
    position:absolute;
    left:0;
    right:0;
    z-index:-1;
    pointer-events: none;
    // Spacing
    margin:.75rem auto;
    text-align: center;  
}
.stage-ghost {
    margin:3rem auto;
}
.stage-ghost-text {
    // Fonts Properties
    font-family: 'Nothing You Could Do', cursive;
    font-size:1.75rem;
    // Transform
    transform: translateY(50px);
}


// Keyframes
@keyframes let-me-in {
  0% {
    opacity:0;
  }
  50% {    
    opacity:1;
  }
  100% {    
    opacity:0;
  }
}