Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML 

              
                <div class="container">
	<div class="blobs">
		<div class="circle-styles main-circle">
			<div class="bg"></div>
			<div class="cross center">
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="circles circle-styles last center">
			<svg class="main-icons" xmlns="http://www.w3.org/2000/svg" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
			 y="0px" enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 64 64" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M56,11h-9V8c0-0.552-0.447-1-1-1s-1,0.448-1,1v3H19V8c0-0.552-0.448-1-1-1s-1,0.448-1,1v3H8c-0.552,0-1,0.448-1,1v44    c0,0.553,0.448,1,1,1h48c0.553,0,1-0.447,1-1V12C57,11.448,56.553,11,56,11z M17,13v3c0,0.552,0.448,1,1,1s1-0.448,1-1v-3h26v3    c0,0.552,0.447,1,1,1s1-0.448,1-1v-3h8v10H9V13H17z M9,55V25h46v30H9z"
                            />
                            <path d="M39.231,33.359L29.807,44.67l-5.252-3.502c-0.46-0.307-1.08-0.182-1.387,0.277c-0.306,0.46-0.182,1.08,0.277,1.387l6,4    C29.615,46.945,29.808,47,30,47c0.288,0,0.572-0.124,0.769-0.359l10-12c0.354-0.425,0.296-1.056-0.128-1.409    C40.215,32.879,39.586,32.936,39.231,33.359z"
                            />
                        </g>
                    </g>
                </svg>
		</div>
		<div class="circles circle-styles second center">
			<svg class="main-icons" xmlns="http://www.w3.org/2000/svg" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
			 y="0px" enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 64 64" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M50,7H14c-0.552,0-1,0.448-1,1v48c0,0.553,0.448,1,1,1h36c0.553,0,1-0.447,1-1V8C51,7.448,50.553,7,50,7z M15,9h6v46h-6V9    z M49,55H23V9h26V55z"
                            />
                            <path d="M32,23h10c0.553,0,1-0.448,1-1s-0.447-1-1-1H32c-0.552,0-1,0.448-1,1S31.448,23,32,23z" />
                            <path d="M42,27H32c-0.552,0-1,0.448-1,1s0.448,1,1,1h10c0.553,0,1-0.448,1-1S42.553,27,42,27z" />
                        </g>
                    </g>
                </svg>
		</div>
		<div class="circles circle-styles first center">
			<svg class="main-icons" xmlns="http://www.w3.org/2000/svg" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
			 y="0px" enable-background="new 0 0 64 64" version="1.1" viewBox="0 0 64 64" xml:space="preserve">
                    <g>
                        <path d="M56,11h-9V8c0-0.552-0.447-1-1-1s-1,0.448-1,1v3H19V8c0-0.552-0.448-1-1-1s-1,0.448-1,1v3H8c-0.552,0-1,0.448-1,1v44   c0,0.553,0.448,1,1,1h48c0.553,0,1-0.447,1-1V12C57,11.448,56.553,11,56,11z M17,13v3c0,0.552,0.448,1,1,1s1-0.448,1-1v-3h26v3   c0,0.552,0.447,1,1,1s1-0.448,1-1v-3h8v10H9V13H17z M25,39V25h14v14H25z M39,41v14H25V41H39z M23,39H9V25h14V39z M41,25h14v14H41   V25z M9,41h14v14H9V41z M41,55V41h14v14H41z"
                        />
                    </g>
                </svg>

		</div>
	</div>

	<div class="box">
		<div class="icons">
			<div class="move-left">
				<?xml version="1.0"?>
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
                        <path style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal"
                            d="M 9 4 C 6.2504839 4 4 6.2504839 4 9 L 4 41 C 4 43.749516 6.2504839 46 9 46 L 25.832031 46 A 1.0001 1.0001 0 0 0 26.158203 46 L 31.832031 46 A 1.0001 1.0001 0 0 0 32.158203 46 L 41 46 C 43.749516 46 46 43.749516 46 41 L 46 9 C 46 6.2504839 43.749516 4 41 4 L 9 4 z M 9 6 L 41 6 C 42.668484 6 44 7.3315161 44 9 L 44 41 C 44 42.668484 42.668484 44 41 44 L 33 44 L 33 30 L 36.820312 30 L 38.220703 23 L 33 23 L 33 21 C 33 20.442508 33.05305 20.398929 33.240234 20.277344 C 33.427419 20.155758 34.005822 20 35 20 L 38 20 L 38 14.369141 L 37.429688 14.097656 C 37.429688 14.097656 35.132647 13 32 13 C 29.75 13 27.901588 13.896453 26.71875 15.375 C 25.535912 16.853547 25 18.833333 25 21 L 25 23 L 22 23 L 22 30 L 25 30 L 25 44 L 9 44 C 7.3315161 44 6 42.668484 6 41 L 6 9 C 6 7.3315161 7.3315161 6 9 6 z M 32 15 C 34.079062 15 35.38736 15.458455 36 15.701172 L 36 18 L 35 18 C 33.849178 18 32.926956 18.0952 32.150391 18.599609 C 31.373826 19.104024 31 20.061492 31 21 L 31 25 L 35.779297 25 L 35.179688 28 L 31 28 L 31 44 L 27 44 L 27 28 L 24 28 L 24 25 L 27 25 L 27 21 C 27 19.166667 27.464088 17.646453 28.28125 16.625 C 29.098412 15.603547 30.25 15 32 15 z"
                            font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible" />
                    </svg>

				<?xml version="1.0" encoding="UTF-8"?>
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" version="1.1">
                        <g id="surface1">
                            <path style=" " d="M 34.21875 5.46875 C 28.238281 5.46875 23.375 10.332031 23.375 16.3125 C 23.375 16.671875 23.464844 17.023438 23.5 17.375 C 16.105469 16.667969 9.566406 13.105469 5.125 7.65625 C 4.917969 7.394531 4.597656 7.253906 4.261719 7.277344 C 3.929688 7.300781 3.632813 7.492188 3.46875 7.78125 C 2.535156 9.386719 2 11.234375 2 13.21875 C 2 15.621094 2.859375 17.820313 4.1875 19.625 C 3.929688 19.511719 3.648438 19.449219 3.40625 19.3125 C 3.097656 19.148438 2.726563 19.15625 2.425781 19.335938 C 2.125 19.515625 1.941406 19.839844 1.9375 20.1875 L 1.9375 20.3125 C 1.9375 23.996094 3.84375 27.195313 6.65625 29.15625 C 6.625 29.152344 6.59375 29.164063 6.5625 29.15625 C 6.21875 29.097656 5.871094 29.21875 5.640625 29.480469 C 5.410156 29.742188 5.335938 30.105469 5.4375 30.4375 C 6.554688 33.910156 9.40625 36.5625 12.9375 37.53125 C 10.125 39.203125 6.863281 40.1875 3.34375 40.1875 C 2.582031 40.1875 1.851563 40.148438 1.125 40.0625 C 0.65625 40 0.207031 40.273438 0.0507813 40.71875 C -0.109375 41.164063 0.0664063 41.660156 0.46875 41.90625 C 4.980469 44.800781 10.335938 46.5 16.09375 46.5 C 25.425781 46.5 32.746094 42.601563 37.65625 37.03125 C 42.566406 31.460938 45.125 24.226563 45.125 17.46875 C 45.125 17.183594 45.101563 16.90625 45.09375 16.625 C 46.925781 15.222656 48.5625 13.578125 49.84375 11.65625 C 50.097656 11.285156 50.070313 10.789063 49.777344 10.445313 C 49.488281 10.101563 49 9.996094 48.59375 10.1875 C 48.078125 10.417969 47.476563 10.441406 46.9375 10.625 C 47.648438 9.675781 48.257813 8.652344 48.625 7.5 C 48.75 7.105469 48.613281 6.671875 48.289063 6.414063 C 47.964844 6.160156 47.511719 6.128906 47.15625 6.34375 C 45.449219 7.355469 43.558594 8.066406 41.5625 8.5 C 39.625 6.6875 37.074219 5.46875 34.21875 5.46875 Z M 34.21875 7.46875 C 36.769531 7.46875 39.074219 8.558594 40.6875 10.28125 C 40.929688 10.53125 41.285156 10.636719 41.625 10.5625 C 42.929688 10.304688 44.167969 9.925781 45.375 9.4375 C 44.679688 10.375 43.820313 11.175781 42.8125 11.78125 C 42.355469 12.003906 42.140625 12.53125 42.308594 13.011719 C 42.472656 13.488281 42.972656 13.765625 43.46875 13.65625 C 44.46875 13.535156 45.359375 13.128906 46.3125 12.875 C 45.457031 13.800781 44.519531 14.636719 43.5 15.375 C 43.222656 15.578125 43.070313 15.90625 43.09375 16.25 C 43.109375 16.65625 43.125 17.058594 43.125 17.46875 C 43.125 23.71875 40.726563 30.503906 36.15625 35.6875 C 31.585938 40.871094 24.875 44.5 16.09375 44.5 C 12.105469 44.5 8.339844 43.617188 4.9375 42.0625 C 9.15625 41.738281 13.046875 40.246094 16.1875 37.78125 C 16.515625 37.519531 16.644531 37.082031 16.511719 36.683594 C 16.378906 36.285156 16.011719 36.011719 15.59375 36 C 12.296875 35.941406 9.535156 34.023438 8.0625 31.3125 C 8.117188 31.3125 8.164063 31.3125 8.21875 31.3125 C 9.207031 31.3125 10.183594 31.1875 11.09375 30.9375 C 11.53125 30.808594 11.832031 30.402344 11.816406 29.945313 C 11.800781 29.488281 11.476563 29.097656 11.03125 29 C 7.472656 28.28125 4.804688 25.382813 4.1875 21.78125 C 5.195313 22.128906 6.226563 22.402344 7.34375 22.4375 C 7.800781 22.464844 8.214844 22.179688 8.355469 21.746094 C 8.496094 21.3125 8.324219 20.835938 7.9375 20.59375 C 5.5625 19.003906 4 16.296875 4 13.21875 C 4 12.078125 4.296875 11.03125 4.6875 10.03125 C 9.6875 15.519531 16.6875 19.164063 24.59375 19.5625 C 24.90625 19.578125 25.210938 19.449219 25.414063 19.210938 C 25.617188 18.96875 25.695313 18.648438 25.625 18.34375 C 25.472656 17.695313 25.375 17.007813 25.375 16.3125 C 25.375 11.414063 29.320313 7.46875 34.21875 7.46875 Z "
                            />
                        </g>

                    </svg>
			</div>
			<div class="move-right">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve">
                        <g>
                            <g>
                                <path d="M50,37.3c-10.3,0-18.7,8.4-18.7,18.7S39.7,74.7,50,74.7S68.7,66.3,68.7,56S60.3,37.3,50,37.3z M50,70.7    c-8.1,0-14.7-6.6-14.7-14.7S41.9,41.3,50,41.3c8.1,0,14.7,6.6,14.7,14.7S58.1,70.7,50,70.7z"
                                />
                                <path d="M50,44.7c-6.2,0-11.3,5.1-11.3,11.3c0,1.1,0.9,2,2,2s2-0.9,2-2c0-4,3.3-7.3,7.3-7.3c1.1,0,2-0.9,2-2S51.1,44.7,50,44.7z"
                                />
                                <path d="M87.5,25.7H72.4L71,19.8c-0.9-3.6-4.1-6.1-7.8-6.1H36.8c-3.7,0-6.9,2.5-7.8,6.1l-1.4,5.9H12.5c-3.5,0-6.3,2.8-6.3,6.3    v48.2c0,3.5,2.8,6.3,6.3,6.3h75c3.5,0,6.3-2.8,6.3-6.3V31.9C93.8,28.5,91,25.7,87.5,25.7z M89.8,80.1c0,1.2-1,2.3-2.3,2.3h-75    c-1.2,0-2.3-1-2.3-2.3V31.9c0-1.2,1-2.3,2.3-2.3h16.6c0.9,0,1.7-0.6,1.9-1.5l1.8-7.4c0.4-1.8,2-3.1,3.9-3.1h26.5    c1.9,0,3.5,1.3,3.9,3.1l1.8,7.4c0.2,0.9,1,1.5,1.9,1.5h16.6c1.2,0,2.3,1,2.3,2.3V80.1z"
                                />
                                <path d="M82.7,35H79c-2.5,0-4.6,2.1-4.6,4.6v3.8c0,2.5,2.1,4.6,4.6,4.6h3.8c2.5,0,4.6-2.1,4.6-4.6v-3.8C87.3,37.1,85.3,35,82.7,35    z M83.3,43.4c0,0.3-0.3,0.6-0.6,0.6H79c-0.3,0-0.6-0.3-0.6-0.6v-3.8c0-0.3,0.3-0.6,0.6-0.6h3.8c0.3,0,0.6,0.3,0.6,0.6V43.4z"
                                />
                            </g>
                        </g>
                    </svg>

				<svg xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
				 xmlns:svg="http://www.w3.org/2000/svg" x="0px" y="0px" version="1.1" viewBox="0 0 95 95">
                        <g transform="translate(0,-952.36218)">
                            <path fill-opacity="1" stroke="none" marker="none" d="m 32,966.36215 c -9.93735,0 -18,8.0626 -18,18 l 0,36.00005 c 0,9.9374 8.06265,18 18,18 l 36,0 c 9.93735,0 18,-8.0626 18,-18 l 0,-36.00005 c 0,-9.9374 -8.06265,-18 -18,-18 l -36,0 z m 0,4 36,0 c 7.79054,0 14,6.2095 14,14 l 0,36.00005 c 0,7.7905 -6.20946,14 -14,14 l -36,0 c -7.79054,0 -14,-6.2095 -14,-14 l 0,-36.00005 c 0,-7.7905 6.20946,-14 14,-14 z m 38,6 c -2.2092,0 -4,1.7908 -4,4 0,2.2091 1.7908,4 4,4 2.2091,0 4,-1.7909 4,-4 0,-2.2092 -1.7909,-4 -4,-4 z m -20,9 c -9.36519,0 -17,7.6349 -17,16.99995 0,9.3651 7.63481,17.0001 17,17.0001 9.36519,0 17,-7.635 17,-17.0001 0,-9.36505 -7.63481,-16.99995 -17,-16.99995 z m 0,4 c 7.20341,0 13,5.7967 13,12.99995 0,7.2033 -5.79659,13.0001 -13,13.0001 -7.20341,0 -13,-5.7968 -13,-13.0001 0,-7.20325 5.79659,-12.99995 13,-12.99995 z"
                                display="inline" overflow="visible" style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:#000000;enable-background:accumulate"
                                visibility="visible" />
                        </g>
                    </svg>

			</div>
		</div>

	</div>

</div>
<svg id="clip">
        <defs>
            <clipPath id="cut">

                <path d="M0,0H550V120H-400zM215,0a60,60 0 1,0 120,0a60,60 0 1,0 -120,0" />

            </clipPath>
        </defs>
    </svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="goo">
                <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
                <feBlend in="SourceGraphic" in2="goo" />
            </filter>
        </defs>
    </svg>
!

CSS 

              
                html {
	box-sizing: border-box;
	background-color: #d8d8d8;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body {
	height: 99vh;
}

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.blobs {
	display: flex;
	justify-content: center;
	align-items: center;
	filter: url(#goo);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.box {
	height: 100px;
	width: 550px;
	background: #ececec;
	box-shadow: 0px 5px 20px 5px rgba(0, 0, 0, 0.075);
	clip-path: url(#cut);
	border-radius: 5px;
	z-index: -1;
}

svg {
	height: 0;
	width: 0;
}

.circle-styles {
	position: absolute;
	width: 90px;
	height: 90px;
	transform: translate(0, -48px);
	background: hsl(337, 70%, 58%);
	clip-path: circle(42px at center);
}

.circle-styles:nth-child(1) span {
	width: 35px;
	height: 5px;
	background: rgb(255, 255, 255);
	position: absolute;
	border-radius: 15px;
}
.circle-styles:nth-child(1) span:nth-child(2) {
	transform: rotate(90deg);
}
.circle-styles:nth-child(1) {
	display: flex;
	align-items: center;
	justify-content: center;
}

.first {
	transition: transform 0.5s 100ms ease-out;
	background: hsl(307, 70%, 58%);
}

.second {
	transition: transform 0.5s 300ms ease-out;
	background: hsl(277, 70%, 58%);
}
.last {
	transition: transform 0.5s 500ms ease-out;
	background: hsl(247, 70%, 58%);
}
.first.show {
	transform: translate(-100px, -120px);
}
.second.show {
	transform: translate(0px, -150px);
}
.last.show {
	transform: translate(100px, -120px);
}
.cross {
	transform-origin: center center;
	transition: all 0.5s ease-in-out;
}
.bg {
	transition: all 0.4s ease-in-out;
	width: 100px;
	height: 100px;
	position: absolute;
	border-radius: 100%;
	transform: scale(0);
	background: hsla(0, 0%, 100%, 0.459);
}
.bg.show {
	transform: scale(0.7);
	opacity: 0;
}

.cross.show {
	transform: rotate(45deg);
}

.main-circle {
	z-index: 2;
}

.icons {
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.icons svg {
	width: 45px;
	height: 45px;
	margin: 30px;
	fill: hsl(0, 0%, 52%);
	transition: fill 0.5s ease-out;
}
.icons svg.colorchange {
	fill: hsla(0, 0%, 67%, 0.534);
}
.circles svg {
	transition: fill 0.3s ease-out;
	fill: hsl(0, 0%, 92%);
}
.circles:hover svg {
	fill: hsl(0, 0%, 100%);
}
.main-icons {
	fill: rgb(255, 255, 255);
	width: 50px;
	height: 50px;
}

.center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.move-left {
	transform: translate(-20px, 0px);
}
.move-right {
	transform: translate(20px, 0px);
}
!

JS 

              
                const button = document.querySelector(".main-circle");
const circles = document.querySelectorAll(".circles");
const cross = document.querySelector(".cross");
const crossbg = document.querySelector(".bg");
const boxicons = document.querySelectorAll(".icons svg");
button.addEventListener("click", function() {
  cross.classList.toggle("show");
  crossbg.classList.toggle("show");
  circles.forEach(element => {
    element.classList.toggle("show");
  });
  boxicons.forEach(element => {
    element.classList.toggle("colorchange");
  });
});
!
999px

Console