<div class="parent">

<p class="paragraph">Here you will witness the power of CSS animation
</p>

<div class="wrapper">
<button class=" button button--disapear">Click Me, and see me vanish</button>
<button class=" button button--trigger">Click Me to show</button>
</div>
 </div>

* {
  box-sizing: border-box;
  text-align: center;
}

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 50px;
}

.paragraph {
  flex: 0 0 100%;
}

.button {
  border: 1px solid #ccc;
  border-radius: 20px;
  text-align: center;
  padding: 1em;
  background: none;
  box-shadow: none;
  transition        : all .3s ease;
  -webkit-transition: all .3s ease;

  &:focus {
    outline: none;
  }
}

.button--disapear {
  display: none;

    &.active {
      animation: scale-display .3s;
      display: inline-flex;
    }

		&.out {
			animation: scale-display--reversed .3s;
			animation-fill-mode:forwards;
			display: inline-flex;
		}
	}
@keyframes scale-display {
	0% {
		opacity: 0;
		transform: scale(0);
    -webkit-transform: scale(0);
	}

	100% {
		opacity: 1;
		transform: scale(1);
    -webkit-transform: scale(1);
	}
}

@keyframes scale-display--reversed {
	0% {
		display: inline-flex;
		opacity: 1;
		transform: scale(1);
		-webkit-transform: scale(1);
	}
	99% {
		display: inline-flex;
		opacity: 0;
		transform: scale(0);
		-webkit-transform: scale(0);
	}
	100% {
		display: none;
		opacity: 0;
		transform: scale(0);
		-webkit-transform: scale(0);
	}
}

$('.button--trigger').on('click', function(e) {
  $('.button--disapear').show();
  $('.button--disapear').removeClass('out').addClass('active');
});

$('.button--disapear').on('click', function(e) {
  $(this).removeClass('active').addClass('out');

			setTimeout(function(){
				$('.button--disapear').hide() 
			}, 300); //Same time as animation
});