<!-- References Dribbble / Twitter / Hicon Pack -->
<div class='cs-ref'>
  <a class='cs-dribbble' href='https://dribbble.com/shots/15457867-UI-Add-Close-Toggle-Button' target='_blank'>
    <div id='svgDribbble'></div>
  </a>
  <a class='cs-twitter' target='_blank' href='https://twitter.com/CosWiSe'>
    <div id='svgTwitter'></div>
  </a>
  <a class='cs-hicon' target='_blank' href='https://hicon.cosm.ws/'>
    <div id='svgHicon'></div>
  </a>
</div>

<!-- CODE -->
<div class='button-container'>
  <button class='button'>
    <div class='symbols'>
      <div class='x-symb'>
        <div class='dot'></div>
        <div class='vert-line line line-w'></div>
        <div class='ori-line line line-w'></div>
      </div>
    </div>
  </button>
</div>
// IMPORT
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,400&display=swap');

// VARIABLES 
:root {
  --canvasBG: rgba(230,238,249,.65);
  --darkC: #333333; // Dark Colour
  --lightC: #ffffff; // Light Colour
  --salmonC: #ff8c69; // Salmon
  --coralC: ff696c; // Coral
  --blueC: #1462ff; // Blue
  --lightBlueC:  #eff4ff;  // Very Light Blue
  --lightGreyC: #f0f1f5; // Light Grey

  --SVGc: rgba(146, 156, 208,.8);
  // --shadowC: #d5dbed; // Darker Shadow
  --shadowC: rgba(83,119,192,.21);
  --shadowDef: 0 3px 20px -3px var(--shadowC);
  --shadowDefAlt: 0 6px 30px -10px var(--shadowC);
}

// PLACEHOLDERS
%no-selection {
  // No selection
  -webkit-user-select: none;  
  -moz-user-select: none;     
  -ms-user-select: none;      
  user-select: none;    
}

// DEFAULT
html {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--canvasBG);
  height: 100vh;
  font-family: 'Nunito', 'Lato', Arial , Sans-Serif;
  color: var(--textC);
}
button {
  border: none;
  outline: none;
  background: transparent;
}

// SVGs
#dribbble {
  position: fixed;
  display: block;
  right: 70px;
  bottom: 16px;
  svg {
    display: block;
    width: 76px;
    height: 24px;
    fill: var(--SVGc);
  }
}
#twitter {
  position: fixed;
  display: block;
  right: 25px;
  bottom: 11px;
  svg {
    width: 24px;
    height: 24px;
    fill: var(--SVGc);
  }
}
#hicon {
  position: fixed;
  display: block;
  left: 25px;
  bottom: -42px;
  svg {
    width: 78px;
    height: 78px;
    fill: var(--SVGc);
  }
}

// CODE

:root {
  --s: 79px;
  --t: 249ms;
  --sp: cubic-bezier(.6,.01,.28,1.49);
}

%center {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  @extend %center;
  width: var(--s);
  height: var(--s);
  background: var(--lightC);
  border-radius: 12px;
  box-shadow: var( --shadowDef);
  padding: 0;
  cursor: pointer;
}

.symbols {
  @extend %center;
  width: 65%;
  height: 65%;
  background: transparent;
}

.x-symb {
  @extend %center;
  width: calc(var(--s)/1.1);
  height: calc(var(--s)/1.1);
  position:relative;
}

.dot {
  position: absolute;
  width: calc(var(--s)/12);
  height: calc(var(--s)/12);
  background: #333;
  border-radius: 50px;
  z-index: 9;
  transition: all var(--t) var(--sp);
}

.line {
  position: absolute;
  width: calc(var(--s)/2);
  background: #333;
  border-radius: 200px;
  transition: all var(--t) var(--sp);
}

.vert-line {
  height: calc(var(--s)/13);
}

.ori-line {
  height: calc(var(--s)/13);
  transform: rotate(90deg);
}

.dot-me {
  width: 5px;
  height: 5px;
  border-radius: 50px;
  transition: all var(--t) var(--sp);
}

.dot-scale {
  transform: scale(2.2);
  transition: all var(--t) var(--sp);
}

.symb-90 {
  transform: rotate(45deg);
}

.button:hover {
  .line-w {
    width: calc(var(--s)/1.6);
  }
}
View Compiled
// ICONS CALLBACK
hicon.replace();

// SVGs
$("#svgDribbble").load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #dribbble");
$("#svgTwitter").load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #twitter");
$("#svgHicon").load("https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #hicon");


/*

ADD NEW ICONS
Take it from
http://hicon.cosm.ws/

And then replace the icon name in load-hicon.
<i load-hicon="heart"></i>

*/

// CODE
var time = 449;

$(".button").click(function() {
  setTimeout(function() {
    $(".line").toggleClass("line-w");
  }, 0);
  setTimeout(function() {
    setTimeout(function() {
      $(".line").toggleClass("dot-me");
    }, 0);
    setTimeout(function() {
      $(".dot").toggleClass("dot-scale");
    }, time - 400);
    setTimeout(function() {
      $(".dot").toggleClass("dot-scale");
    }, time - 149);
    setTimeout(function() {
      $(".symbols").toggleClass("symb-90");
    }, time - 300);
    setTimeout(function() {
      $(".line").toggleClass("dot-me");
    }, time);
  }, 40);
    setTimeout(function() {
    $(".line").toggleClass("line-w");
  }, time + 40);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js