<!-- 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);
});
This Pen doesn't use any external CSS resources.