CodePen Embed - Close button effects

<h1>Close button UI collection</h1>
<div><p class="auth">by: <a href="http://www.badalic.com" target="_blank"<span>Jonas Badalic</span></a></p><div class="sepLine"></div></div>
<div class="container">
  <div class="circCont"><button class="circle" data-animation="simpleRotate" data-remove="200"></button><p>Touchup</p></div>
  <div class="circCont"><button class="circle" data-animation="rotateY"></button><p>Flip y</p></div>
  <div class="circCont"><button class="circle" data-animation="rotateX"></button><p>Flip x</p></div>
  <div class="circCont"><button class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button><p>Scale down</p></div>
  <div class="circCont"><button class="circle scaleUp" data-animation="minimize"></button><p>Shrink</p></div>
  <div class="circCont"><button class="circle boxShadow" data-animation="fadeOut" data-remove="3000"></button><p>Shadow scale</p></div>
  <div class="circCont"><button class="circle" data-animation="magnify" data-remove="3000"></button><p>Scale</p></div>
  <div class="circCont"><button class="circle fromMiddle" data-animation="magnify" data-remove="3000">
    <span></span>
  </button><p>Shadow inside</p></div>
  <div class="circCont"><button class="circle" data-animation="downBorder"></button><p>Shrink rotate</p></div>
  <div class="circCont"><button class="circle" data-animation="radiusPlus"></button><p>Radius</p></div>
  <div class="circCont"><button class="circle" data-animation="shrinkRadius"></button><p>Radius small</p></div>
  <div class="circCont">
    <button class="circle" data-animation="xMarks" data-remove="3000"></button>
    <p>X marks</p>
  </div>
  <div class="circCont">
    <button class="circle" data-animation="showShadow" data-remove="3000"></button>
    <p>no border</p>
  </div>
</div>
<div class="heartIt">
  <p>If you like it - use it, heart it, fork it, share it!</p>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/176026/heart292_(1).png" alt="heart this pen" />
  <p>Thanks!</p>
  
  
</div>


















<div class="followlinks">
  <a href="http://www.badalic.com">website  </a>
  <a href="https://twitter.com/JonasBadalic"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="32px" height="32px" viewBox="0 0 16 16" enable-background="new 0 0 32 32" xml:space="preserve">
<path d="M8,0C3.582,0,0,3.582,0,8s3.582,8,8,8s8-3.582,8-8C16,3.581,12.418,0,8,0z M11.98,6.204l0.006,0.255
	c0,2.604-1.981,5.604-5.604,5.604c-1.112,0-2.147-0.326-3.019-0.885c0.154,0.018,0.311,0.028,0.47,0.028
	c0.923,0,1.772-0.315,2.446-0.843c-0.862-0.016-1.589-0.586-1.84-1.368C4.56,9.018,4.682,9.029,4.81,9.029
	c0.18,0,0.354-0.023,0.519-0.068c-0.901-0.182-1.58-0.977-1.58-1.931V7.005c0.266,0.148,0.569,0.236,0.892,0.247
	C4.113,6.899,3.765,6.296,3.765,5.613c0-0.361,0.097-0.699,0.266-0.99c0.971,1.192,2.423,1.976,4.06,2.058
	C8.057,6.537,8.04,6.386,8.04,6.232c0-1.087,0.882-1.969,1.97-1.969c0.566,0,1.078,0.239,1.438,0.622
	c0.448-0.089,0.87-0.253,1.251-0.478c-0.147,0.46-0.459,0.846-0.866,1.09c0.397-0.047,0.778-0.154,1.131-0.31
	C12.7,5.581,12.365,5.928,11.98,6.204z"/>
</svg></a>
</div>

@import "compass/css3";

$blue: #03a9f4;
$red:#E91E63;
$transp:rgba(0,0,0,0.03);
html{
  background:$transp;
}
button:focus{
  outline:none;}
body{
  text-align:center;
  font-family:Open Sans;
}
h1{
  display:block;
  font-size:42px;
  text-align:center;
  font-weight:300;
  margin:40px 0px 20px 0px;
}
.heartIt{
  margin-top:50px;
  margin-bottom:80px;
  p{
    font-size:24px;
    line-height:40px;
  }
  img{
    width:64px;
    height:auto;
  }
}
.sepLine{
  width:70px;
  height:1px;
  background-color: rgba(0,0,0,0.4);
  margin-top:20px;
  margin-bottom:10px;
  display:inline-block;
  left:50%;
}
.auth{
  font-weight:400;
  color:rgba(0,0,0,1);
  position: relative;display:block;
  a{
    color:rgba(0,0,0,1);
    font-weight: 400;
  }
}
a{
  
  text-decoration:none;
}
.container{
  @include perspective(1000);
  max-width:560px;
  display:inline-block;
  /*
  position:absolute;
  left:50%;
  @include transform(translate3d(-50%,0,0));*/
}
.circCont{
  display:inline-block;
}
.circle{
  width:40px;
  height:40px;
  background:transparent;
  border: 4px solid $red;
  @include border-radius(50%);
  position:relative;
  cursor:pointer;
  display:inline-block;
  margin:10px 20px;
  &:after{
    width:24px;
    height:4px;
    background-color:$red;
    content:"";
    left:50%;
    top:50%;
    margin-left:-12px;
    margin-top:-2px;
    position:absolute;
    @include transform(rotate(-45deg));
    /*@include transform-origin(100%,100%);*/
  }
  &:before{
    left:50%;
    top:50%;
    margin-left:-12px;
    margin-top:-2px;
    width:24px;
    height:4px;
    background-color:$red;
    content:"";
    position:absolute;
    @include transform(rotate(45deg));
    /*@include transform-origin(0%,0%);*/
  }
  & + p{
    text-transform:lowercase;
    font-size:14px;
    margin-bottom:10px;
  }
}
.simpleRotate{
  @include animation(rotate 0.1s 2 ease-in-out alternate);
}
@include keyframes(rotate){
  0%{
    @include transform(scale(1));
  }
  100%{
    @include transform(scale(0.8));
  }
}
.circle[data-animation="simpleRotate"]:not(.simpleRotate){
  @include transition(200ms cubic-bezier(0.175, 0.885, 0.52, 1.775));
  &:hover{
    @include transform(scale(1.1));
  }
}
.circle[data-animation="rotateY"]{
  @include transition(300ms ease-in-out);
  &:after{
    @include transition-delay(150ms);
  }
  &:before{
    @include transition-delay(150ms);
  }
}
.circle[data-animation="rotateX"]{
  @include transition(300ms ease-in-out);
  &:after{
    @include transition-delay(150ms);
  }
  &:before{
    @include transition-delay(150ms);
  }
}
.rotateY{
  @include transform(rotateY(180deg) scale(0.5));
  &:after{
    @include transform(rotate(0deg));
  }
  &:before{
    @include transform(rotate(90deg));
  }
}
.rotateX{
  @include transform(rotateX(180deg) scale(0.5));
  &:after{
    @include transform(rotate(0deg));
  }
  &:before{
    @include transform(rotate(90deg));
  }
}
.scaleUp:not(.scaleDown):not(.minimize){
  @include transition(200ms cubic-bezier(0.175, 0.885, 0.52, 1.575));
  &:hover{
    @include transform(scale(1.2));
    &:after{
      @include transform(scale(1.1) rotate(45deg));
    }
    &:before{
      @include transform(scale(1.1) rotate(-45deg));
    }
  }
}

.scaleDown{
  @include transition(300ms ease-in-out);
  @include transform(scale(0));
}
.minimize{
  @include transition(300ms ease-in-out);
  @include transform(scale(0.3));
}
.boxShadow{
  @include transition(
    box-shadow 200ms ease-out,
    transform 200ms ease-out,
    opacity 200ms ease-in-out
  );
  &:after,
  &:before{
    @include transition(400ms linear);
  }
}
.boxShadow:hover:not(.fadeOut){
  @include box-shadow(0px 0px 0px 20px $red inset);
  @include transform(scale(0.8));
  &:after{
    background-color: #fff;
    @include transform(rotate(-45deg) scale(0.6));
  }
  &:before{
    background-color: #fff;
    @include transform(rotate(45deg) scale(0.6));
  }
}
.fadeOut{
  opacity:0;
}
.circle[data-animation="magnify"]:not(.magnify){
  @include transition(100ms ease-in-out);
  &:hover{
    @include transform(scale(0.9));
  }
}
.circle.magnify{
  @include transition(200ms ease-in-out);
  @include transform(scale(1.6));
  opacity:0;
}
.fromMiddle{&:before,
  &:after{
    z-index:9999;
    @include transition-delay(150ms);
    @include transition(400ms ease-in-out);
  }
  span{
    width:38px;
    height:38px;
    background-color: $red;
    display:inline-block;
    position: absolute;
    @include border-radius(100%);
    left:-2px;
    top:-2px;
    z-index:-9999;
    @include transform(scale(0.3));
    opacity:0;
    @include transition(300ms ease-in-out);
  }
}
.fromMiddle:hover{
  &:before,
  &:after{
    position:absolute;
    background-color: #fff;
  }
  span{
    @include transform(scale(1));
    opacity:1;
  }
}

.circle[data-animation="downBorder"]{
  @include transition(200ms ease-out);
  &:hover:not(.downBorder){
    @include transform(rotate(10deg));
  }
}
.downBorder{
  border:4px solid transparent;
  @include transform(scale(0.3) rotate(45deg));
}
.circle[data-animation="radiusPlus"]{
  @include transition(300ms ease-out);
  &:before,
  &:after{
    @include transition(300ms ease-out);
  }
}
.radiusPlus{
  @include border-radius(10px);
  @include transform(scale(0.7));
  &:before{
    @include transform(rotate(0deg));
  }
  &:after{
    @include transform(rotate(-90deg));
  }
}
.circle[data-animation="shrinkRadius"]{
  @include transition(400ms ease-in-out);
  &:after,
  &:before{
    @include transition(400ms ease-in-out);
  }
}
.circle.shrinkRadius{
  @include border-radius(10px);
  @include transform(scale(0.3));
  &:before{
    @include transform(rotate(0deg));
  }
  &:after{
    @include transform(rotate(-90deg));
  }
}

.circle[data-animation="xMarks"]{
  border:0px solid white;
  overflow:hidden;
  @include box-shadow(0px 0px 0px 0px $red inset);
  @include transition(200ms cubic-bezier(0.175, 0.885, 0.52, 1.775));
  &:before,
  &:after{
    @include transition(200ms cubic-bezier(0.175, 0.885, 0.52, 1.775));
  }
  &:not(.xMarks):hover{
    @include box-shadow(0px 0px 0px 6px $red inset);
    &:before{
      @include transform(scale(0.7) rotate(45deg));
      @include transition-delay(100ms);
    }
    &:after{
      @include transform(scale(0.7) rotate(-45deg));
      @include transition-delay(100ms);
    }
  }
}
.circle.xMarks{
  @include transition(transform 400ms ease-out,opacity 200ms ease-in);
  @include transition-delay(opacity 100ms);
  @include transform(scale(2));
  opacity:0;
  @include box-shadow(0px 0px 0px 20px $red inset);
  &:before{
    background-color: white;
    @include transform(scale(2) rotate(45deg));
  }
  &:after{
    background-color: white;
    @include transform(scale(2) rotate(-45deg));
  }
}


.circle[data-animation="showShadow"]{
  @include box-shadow(0px 0px 0px 0px $red inset);
  @include transition(200ms cubic-bezier(0.175, 0.885, 0.52, 1.775));
  &:before,
  &:after{
    @include transition(200ms cubic-bezier(0.175, 0.885, 0.52, 1.775));
  }
  border:0px solid white;
  &:not(.showShadow):hover{
    @include box-shadow(0px 0px 0px 6px $red inset);
    &:before{
      @include transform(scale(0.7) rotate(45deg));
      @include transition-delay(100ms);
    }
    &:after{
      @include transform(scale(0.7) rotate(-45deg));
      @include transition-delay(100ms);
    }
  }
}
.circle.showShadow{
  @include transition(300ms ease-out);
  @include transform(scale(0));
  opacity:0;
}






.followlinks{
  position:fixed;
  right:35px;
  bottom:15px;
  display:table;
  a {
    display:table-cell;
    vertical-align:middle;
    padding-left:10px;
    color:black;
  }
}

View Compiled

$('.circle').on('click',function(){
  var animClass = $(this).data('animation');
  var removeTime = $(this).data('remove');
  if($(this).hasClass(animClass)){
     $(this).removeClass(animClass);
  }else{
    $(this).addClass(animClass);
    if(typeof removeTime != 'undefined'){
      var el = $(this);
       setTimeout(function(){
         el.removeClass(animClass);
       },removeTime);
    }
  }
});

This Pen is owned by Jonas Badalic on CodePen.

See more by @JonasBadalic on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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