%body
  .vertical-align
    .text Mouse over, mouse out, and click
    .close-button-container
      .close-button
View Compiled
@import "bourbon";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,);

$medium-gray:  #000;
@include keyframes(slideDown) {
  0% {
    @include transform(translateY(0));
  }
  10% {
    @include transform(translateY(-8px));
  }
  40% {
    @include transform(translateY(100px));
  }
  50% {
    @include transform(translateY(-8px));
  }
  65% {
    @include transform(translateY(4px));
  }
  85% {
    @include transform(translateY(-2px));
  }
  100% {
    @include transform(translateY(0));
  }
}
* {
  box-sizing: border-box;
}
body {
  display: table;
  height: 100%;
  width: 100%;
  font-family: Roboto, Helvetica Neue, sans-serif;
}
.text {
  font-size: 18px;
  text-transform: uppercase;
  color: $medium-gray;
  font-weight: 400;
  margin: 0 auto 30px;
  text-align: center;
}
.vertical-align {
  display: table-cell;
  vertical-align: middle;
  height: 100vh;
}
.close-button-container {
  width: 30px;
  position: relative;
  margin: 0 auto;
}
.close-button {
  position: absolute;
  margin: 0 auto;
  border: 2px solid lighten($medium-gray, 10%);
  background: transparent;
  border-radius: 20px;
  padding: 15px 15px 15px;
  cursor: pointer;
  @include size(30px);
  @include transition(all 500ms $ease-in-out-back);
  &:hover {
    border: 2px solid lighten($medium-gray, 20%);
    @include transition(all 250ms $ease-in-out-back);
  }
  &:after,
  &:before {
    @include position(absolute, 3px 3px 0 50%);
    @include transform(rotate(45deg) translateX(0) translateY(0));
    @include size(0.15em 1.5em);
    background: lighten($medium-gray, 10%);
    content: '';
    display: block;
    margin: 0 0 0 -1px;
    @include transition(all 500ms $ease-in-out-back);
    }
    &:hover:after,
    &:hover:before {
      background: lighten($medium-gray, 20%);
    }
    &:hover:after {
      @include transform(rotate(-315deg) translateX(7px) translateY(1px));
      @include size(0.15em .9em);
      @include transition(all 250ms $ease-in-out-back);
    }
    &:hover:before {
      @include transform(rotate(-405deg) translateX(-7px) translateY(1px));
      @include size(0.15em .9em);
      @include transition(all 250ms $ease-in-out-back);
    }
    &:before {
      @include transform(rotate(-45deg) translateX(0) translateY(0));
    }
  }
.slide-down {
  @include animation-name(slideDown);
  @include animation-duration(1200ms);
  @include animation-iteration-count(1);
  @include animation-timing-function(ease-in-out);
}
View Compiled
$('.close-button').click(function() {
  var _this = this;
  $(_this).addClass('slide-down');
  setTimeout(function() {
    $(_this).removeClass('slide-down');
  }, 1250);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js