<div class="row">
  <h1 class="mytitle">Collapsing modal/notification buttons</h1>
  <div class="col-xs-12 col-md-4">
    <div class="mynotification">
      <div class="text-notification">Close right</div>
      <div class="close-me right"></div>
    </div>
  </div>

  <div class="col-xs-12 col-md-4">
    <div class="mynotification">
      <div class="text-notification">Close bottom, height is not dependant from the modal text</div>
      <div class="close-me bottom"></div>
    </div>
  </div>

  <div class="col-xs-12 col-md-4">
    <div class="mynotification">
      <div class="close-me left"></div>
      <div class="text-notification left-text">Close left</div>

    </div>
  </div>
</div>
@import "compass/css3";

body,html{
  position:relative;
  background:black;
  font-family:Raleway,sans serif;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  font-smoothing:antialiased;
}
h1{
  color:white;
  text-align:center;
  margin:25px;
  font-size:2rem;
}
$white:white;
.col-xs-12.col-md-4{
  text-align:center;
}
//Main container
.mynotification{
  @include perspective(1000);
  position:relative;
  margin:40px;
}
.text-notification{
  display:inline-block;
  padding: 20px;
  border:1px solid $white;
  color:$white;
  width:200px;
}
.close-me{
  @include transition(
    box-shadow 400ms ease-in,
    color 100ms 200ms linear,
    opacity 200ms linear 200ms,
    transform 200ms linear 200ms
  );
  cursor:pointer;
}
.close-me.right{
  width:60px;
  height:100%;
  border-top:1px solid $white;
  border-right:1px solid $white;
  border-bottom:1px solid $white;
  position:absolute;
  &:after{
    position:absolute;
    width:15px;
    height:2px;
    content:"";
    background:$white;
    top:50%;
    left:50%;
    margin-left:-7.5px;
    margin-top:-1px;
    @include transform(rotate(45deg));
    @include transition(background-color 100ms 200ms linear,transform 200ms ease-in-out);
  }
  &:before{
    @extend .close-me:after;
    @include transform(rotate(-45deg));
    @include transition(background-color 100ms 200ms linear,transform 200ms ease-in-out);
  }
}
.close-me.right{
  display:inline-block;
}
.mynotification.close-right{
  @include animation(close-right 0.4s ease-in-out forwards);
  opacity:0;
  @include transition(opacity 150ms 300ms linear);
  .close-me.right{
    @include transform-origin(left, center);
    @include transform(rotateY(90deg));
    opacity:0;
    @include transition(
      opacity 200ms linear 200ms,
      transform 200ms linear 200ms
      )
  }
}
@include keyframes(close-right){
  0%{
    @include transform(translate3d(0,0,0));
  }
  50%{
    @include transform(translate3d(-20px,0,0));
  }
  100%{
    @include transform(translate3d(20px,0,0));
  }
}

.bottom{
  @extend .close-me.right;
  display:block;
  width:200px;
  height:60%;
  border-top:none;
  border-left:1px solid $white;
  left:50%;
  margin-left:-100px;
  @include transform-origin(top, center);
}
.mynotification.close-bottom{
  @include animation(close-bottom 0.4s ease-in-out forwards);
  opacity:0;
  @include transition(opacity 150ms 300ms linear);
  .close-me.bottom{
    @include transform(rotateX(-90deg));
    opacity:0;
    @include transition(
      opacity 200ms linear 200ms,
      transform 100ms linear 200ms
      )
  }
}
@include keyframes(close-bottom){
  0%{
    @include transform(translate3d(0,0px,0));
  }
  50%{
    @include transform(translate3d(0,-20px,0));
  }
  100%{
    @include transform(translate3d(0,20px,0));
  }
}
.text-notification.left-text{
  margin-left:60px;
}
.left{
  @extend .close-me.right;
  border-left:1px solid $white;
  border-right:none;
}
.close-left{
  @include animation(close-left 0.4s ease-in-out forwards);
  opacity:0;
  @include transition(opacity 150ms 300ms linear);
  .close-me{
    @include transform(rotateY(-90deg));
    opacity:0;
    @include transition(
      opacity 200ms linear 200ms,
      transform 200ms linear 200ms
      );
    @include transform-origin(right, center);
  }
}

@include keyframes(close-left){
  0%{
    @include transform(translate3d(0,0,0));
  }
  50%{
    @include transform(translate3d(20px,0,0));
  }
  100%{
    @include transform(translate3d(-20px,0,0));
  }
}
.close-me:hover{
  @include box-shadow(inset 0px 0px 100px 150px white);
  @include transition(
    box-shadow 400ms ease-in,
    color 100ms 200ms linear,
    opacity 200ms linear 200ms,
    transform 200ms linear 200ms
  );
  &:before,
  &:after{
    background-color:black;
    @include transition(background-color 100ms 200ms linear,transform 200ms ease-in-out);
    @include transform(scale(1.2));
  }
}
View Compiled
$('.close-me.right').on('click',function(){
  $(this).closest('.mynotification').addClass('close-right');
});
$('.close-me.bottom').on('click',function(){
  $(this).closest('.mynotification').addClass('close-bottom');
});
$('.close-me.left').on('click',function(){
  $(this).closest('.mynotification').addClass('close-left');
});
var classes = ['close-right','close-bottom','close-left'];
$('.close-me').on('click',function(){
  if(
    $('.mynotification').hasClass(classes[0]) &&
    $('.mynotification').hasClass(classes[1]) &&
    $('.mynotification').hasClass(classes[2])){
      $('.mytitle').fadeOut(500,function(){
        $('.mytitle').text('Refresh to see it again!').fadeIn(500);
      });
    }
});

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