cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

            
              <div class="popping-menu">
<input class="checkbox" id="checkbox" type="checkbox" />
<button>
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" fill="white">
<g>
	<g>
		<g>
			<path d="M384,0H128c-14.138,0-25.6,11.461-25.6,25.6v460.8c0,14.138,11.461,25.6,25.6,25.6h256c14.138,0,25.6-11.461,25.6-25.6     V25.6C409.6,11.461,398.138,0,384,0z M392.533,68.267H196.267c-4.713,0-8.533,3.82-8.533,8.533s3.82,8.533,8.533,8.533h196.267     v332.8h-25.6c-4.713,0-8.533,3.82-8.533,8.533s3.82,8.533,8.533,8.533h25.6v51.2c0,4.713-3.82,8.533-8.533,8.533H128     c-4.713,0-8.533-3.82-8.533-8.533v-51.2h196.267c4.713,0,8.533-3.82,8.533-8.533s-3.82-8.533-8.533-8.533H119.467v-332.8h25.6     c4.713,0,8.533-3.82,8.533-8.533s-3.82-8.533-8.533-8.533h-25.6V25.6c0-4.713,3.82-8.533,8.533-8.533h256     c4.713,0,8.533,3.82,8.533,8.533V68.267z"></path>
			<path d="M264.533,460.8h-17.067c-4.713,0-8.533,3.82-8.533,8.533s3.82,8.533,8.533,8.533h17.067c4.713,0,8.533-3.82,8.533-8.533     S269.246,460.8,264.533,460.8z"></path>
		</g>
	</g>
</g>
</svg>
</button>
<button><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve" fill="white">
<g>
	<g>
		<path d="M356,145.993c-5.52,0-10,4.48-10,10c0,5.52,4.48,10,10,10c5.52,0,10-4.48,10-10S361.52,145.993,356,145.993z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M156,345.993c-5.52,0-10,4.48-10,10c0,5.52,4.48,10,10,10s10-4.48,10-10C166,350.473,161.52,345.993,156,345.993z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M508.532,214.332c-0.811-4.815-4.98-8.34-9.862-8.34h-38.684c-5.079-20.77-13.275-40.497-24.447-58.838l29.082-29.081    c3.453-3.454,3.907-8.897,1.073-12.875c-16.262-22.821-36.079-42.638-58.9-58.9c-3.977-2.833-9.419-2.381-12.875,1.073    l-29.081,29.082C346.497,65.282,326.77,57.084,306,52.006V13.323c0-4.882-3.525-9.051-8.34-9.861    c-27.347-4.604-55.973-4.604-83.319,0C209.525,4.272,206,8.441,206,13.323v38.683c-20.778,5.08-40.508,13.278-58.839,24.446    l-29.08-29.081c-3.454-3.454-8.897-3.908-12.875-1.073c-22.821,16.262-42.638,36.079-58.9,58.9    c-2.834,3.978-2.38,9.42,1.073,12.875l29.082,29.081c-11.172,18.341-19.368,38.068-24.447,58.838H13.33    c-4.882,0-9.051,3.525-9.861,8.34C1.167,228.007,0,242.022,0,255.993c0,13.97,1.167,27.986,3.469,41.66    c0.811,4.815,4.979,8.34,9.861,8.34h38.683c5.08,20.778,13.278,40.508,24.446,58.839l-29.081,29.08    c-3.453,3.454-3.907,8.897-1.073,12.875c16.262,22.821,36.079,42.638,58.9,58.9c3.977,2.834,9.42,2.381,12.875-1.073    l29.081-29.082C165.503,446.704,185.23,454.9,206,459.978v38.684c0,4.882,3.525,9.051,8.34,9.861    c13.671,2.302,27.688,3.469,41.66,3.469s27.989-1.167,41.66-3.469c4.814-0.811,8.34-4.979,8.34-9.861V459.98    c20.778-5.08,40.508-13.278,58.839-24.446l29.08,29.081c3.454,3.453,8.896,3.906,12.875,1.073    c22.821-16.262,42.638-36.079,58.9-58.9c2.834-3.978,2.38-9.42-1.073-12.875L435.54,364.83    c11.172-18.341,19.368-38.068,24.447-58.838h38.684c4.882,0,9.051-3.525,9.861-8.34c2.302-13.673,3.469-27.69,3.469-41.66    C512.001,242.022,510.834,228.007,508.532,214.332z M490.054,285.993H451.98c-4.754,0-8.851,3.347-9.799,8.006    c-4.855,23.854-14.18,46.298-27.715,66.708c-2.629,3.965-2.101,9.234,1.263,12.598l28.658,28.658    c-12.254,15.943-26.475,30.163-42.417,42.417l-28.658-28.658c-3.364-3.365-8.634-3.893-12.6-1.261    c-20.395,13.532-42.837,22.856-66.706,27.714c-4.659,0.948-8.006,5.045-8.006,9.799v38.074c-19.816,2.586-40.184,2.586-60,0    v-38.074c0-4.754-3.347-8.851-8.006-9.799c-23.854-4.855-46.298-14.18-66.708-27.715c-3.966-2.63-9.234-2.102-12.598,1.263    l-28.658,28.658c-15.943-12.254-30.163-26.475-42.417-42.417l28.658-28.658c3.365-3.364,3.892-8.634,1.261-12.6    C84,340.311,74.676,317.868,69.818,294c-0.948-4.659-5.045-8.006-9.799-8.006H21.946c-1.293-9.911-1.946-19.967-1.946-30    c0-10.033,0.653-20.089,1.946-30H60.02c4.754,0,8.851-3.347,9.799-8.006c4.855-23.854,14.18-46.298,27.715-66.708    c2.629-3.965,2.101-9.234-1.263-12.598l-28.658-28.658c12.255-15.943,26.475-30.163,42.418-42.417l28.658,28.658    c3.364,3.364,8.634,3.893,12.6,1.261c20.395-13.532,42.837-22.856,66.706-27.714c4.659-0.948,8.006-5.045,8.006-9.799V21.939    c19.821-2.586,40.179-2.586,60,0v38.074c0,4.754,3.347,8.851,8.006,9.799c23.854,4.855,46.298,14.18,66.708,27.715    c3.964,2.629,9.233,2.101,12.598-1.263l28.658-28.658c15.943,12.254,30.163,26.475,42.417,42.417l-28.658,28.658    c-3.364,3.364-3.892,8.633-1.263,12.598c13.535,20.41,22.86,42.853,27.715,66.708c0.948,4.659,5.045,8.006,9.799,8.006h38.074    c1.293,9.911,1.946,19.967,1.946,30C492.001,266.025,491.347,276.082,490.054,285.993z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M327.972,124.405c-21.947-12.047-46.835-18.414-71.972-18.414c-82.71,0-150,67.29-150,150    c0,25.137,6.367,50.024,18.414,71.972c2.665,4.857,8.751,6.604,13.578,3.955c4.842-2.657,6.612-8.736,3.955-13.578    C131.514,299.335,126,277.775,126,255.993c0-71.682,58.318-130,130-130c21.782,0,43.342,5.514,62.349,15.946    c4.84,2.657,10.921,0.888,13.578-3.955C334.585,133.142,332.814,127.064,327.972,124.405z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M387.586,184.022c-2.657-4.843-8.736-6.613-13.578-3.955c-4.842,2.657-6.612,8.736-3.955,13.578    C380.486,212.65,386,234.211,386,255.993c0,71.682-58.318,130-130,130c-21.782,0-43.342-5.514-62.349-15.946    c-4.839-2.656-10.92-0.887-13.578,3.955c-2.658,4.841-0.887,10.92,3.955,13.578c21.947,12.047,46.835,18.414,71.972,18.414    c82.71,0,150-67.29,150-150C406,230.856,399.633,205.97,387.586,184.022z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M256,145.993c-60.654,0-110,49.346-110,110s49.346,110,110,110s110-49.346,110-110S316.654,145.993,256,145.993z     M256,345.993c-49.626,0-90-40.374-90-90c0-49.626,40.374-90,90-90c49.626,0,90,40.374,90,90    C346,305.618,305.626,345.993,256,345.993z"></path>
	</g>
</g>
</svg></button>
<button><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" fill="white">
<g>
	<g>
		<path d="M416,426c-5.52,0-10,4.48-10,10c0,5.52,4.48,10,10,10c5.52,0,10-4.48,10-10C426,430.48,421.52,426,416,426z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M446,47.432V30c0-16.542-13.458-30-30-30H96C79.458,0,66,13.458,66,30v17.432C0.773,167.896,0.003,164.319,0,169.989    c0,0.004,0,0.007,0,0.011v20c0,17.333,10.022,33.453,26,42.62V502c0,5.522,4.478,10,10,10h440c5.522,0,10-4.478,10-10V232.62    c15.817-9.159,26-25.469,26-42.62v-20c0-0.004,0-0.007,0-0.011C511.997,164.258,510.591,166.721,446,47.432z M485.088,160h-61.88    L389.875,60h40.213L485.088,160z M346,180h60v10c0,16.542-13.458,30-30,30s-30-13.458-30-30V180z M344.471,160L327.805,60h40.987    l33.333,100H344.471z M86,30c0-5.514,4.486-10,10-10h320c5.514,0,10,4.486,10,10v10c-9.522,0-330.404,0-340,0V30z M326,180v10    c0,16.542-13.458,30-30,30s-30-13.458-30-30v-10H326z M266,160V60h41.529l16.667,100H266z M187.805,160l16.667-100H246v100    H187.805z M246,180v10c0,16.542-13.458,30-30,30s-30-13.458-30-30v-10H246z M109.874,160l33.333-100h40.988l-16.667,100H109.874z     M166,180v10c0,16.542-13.458,30-30,30s-30-13.458-30-30v-10H166z M81.912,60h40.213L88.792,160h-61.88L81.912,60z M20,190v-10h66    v10c0,15.701-15.729,30-33,30c-4.354,0-8.866-0.945-13.066-2.742C28.011,212.187,20,201.232,20,190z M206,492H106v-86h100V492z     M206,386H106v-86h100V386z M466,492H226V290c0-5.522-4.478-10-10-10H96c-5.522,0-10,4.478-10,10v202H46V239.511    c2.318,0.315,4.653,0.489,7,0.489c13.161,0,26.465-5.214,36.498-14.306c2.219-2.01,4.217-4.16,6.01-6.413    C104.602,231.822,119.36,240,136,240c16.339,0,30.87-7.878,40-20.035C185.13,232.122,199.661,240,216,240s30.87-7.878,40-20.035    C265.13,232.122,279.661,240,296,240s30.87-7.878,40-20.035C345.13,232.122,359.661,240,376,240    c16.64,0,31.398-8.178,40.492-20.719c1.793,2.253,3.791,4.402,6.01,6.413C432.535,234.786,445.839,240,459,240    c2.342,0,4.677-0.168,7-0.485V492z M492,190c0,11.548-8.309,22.629-20.674,27.575c-4.044,1.61-8.19,2.425-12.326,2.425    c-17.271,0-33-14.299-33-30v-10h66V190z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M436,386h-10v-96c0-5.522-4.478-10-10-10H296c-5.522,0-10,4.478-10,10v96h-10c-5.522,0-10,4.478-10,10    c0,5.522,4.478,10,10,10h160c5.522,0,10-4.478,10-10C446,390.478,441.522,386,436,386z M406,386H306v-86h100V386z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M376,426h-80c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h80c5.522,0,10-4.478,10-10C386,430.478,381.522,426,376,426    z"></path>
	</g>
</g>
</svg></button>
<button><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" fill="white">
<g>
	<g>
		<path d="M299.359,266.002c-5.52,0-10,4.48-10,10c0,5.52,4.48,10,10,10c5.52,0,10-4.48,10-10    C309.359,270.482,304.878,266.002,299.359,266.002z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M239.359,123.002c-5.52,0-10,4.48-10,10c0,5.52,4.48,10,10,10c5.52,0,10-4.48,10-10    C249.359,127.482,244.878,123.002,239.359,123.002z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M411.646,178.251c-15.378-46.131-46.09-86.391-86.495-113.402c-9.031-29.961-31.399-53.916-59.541-63.301l-3.08-1.03    c-3.843-1.286-8.073-0.126-10.724,2.93c-2.652,3.057-3.201,7.411-1.39,11.03c3.857,7.706,6.463,16.506,7.643,25.681l-5.772,5.772    c-11.008,11.008-25.643,17.071-41.209,17.071h-11.72c-3.609,0-7.111,1.999-8.878,5.409c-0.021,0.04-0.046,0.076-0.066,0.116    l-7.062,14.114c-6.275,12.559-18.896,20.36-32.936,20.36c-4.406,0-8.801,0.511-13.056,1.517    c-8.673,2.046-13.957,5.405-16.584,6.598c-19.381,9.684-31.42,29.159-31.42,50.825c0,15.685,5.791,25.013,12.143,37.695    c6.706,13.215,20.078,21.425,34.897,21.425c6.105,0,11.983-1.392,17.477-4.138c15.345-7.682,34.263-8.317,50.859-0.054    l0.034,0.018c0.076,0.04,0.151,0.08,0.229,0.118c5.408,2.704,11.27,4.506,17.265,5.379c-11.195,7.753-22.887,13.305-34.44,16.195    c-50.817,12.705-83.713,66.415-64.521,123.862l6.57,19.72c1.36,4.084,5.183,6.839,9.487,6.839h10v23h-10    c-16.575,0-30,13.424-30,30c0,6.169,1.874,11.908,5.079,16.681C99.461,467.328,89.356,483.5,89.356,502c0,5.523,4.478,10,10,10    h280c5.522,0,10-4.477,10-10c0-18.401-9.914-34.583-25.049-43.333c3.284-4.893,5.049-10.645,5.049-16.667    c0-16.542-13.458-30-30-30h-10v-23h10.003v0.002c4.304,0,8.126-2.754,9.486-6.837l4.191-12.57    c2.502-7.507,4.764-15.412,6.757-23.592h39.565c4.767,0,8.87-3.364,9.806-8.038l9.341-46.683    C425.844,254.545,423.344,213.346,411.646,178.251z M367.656,492.002H111.073c4.127-11.641,15.249-20,28.286-20h200    C352.648,472.002,363.628,480.587,367.656,492.002z M339.359,432.002c5.513,0,10,4.485,10,10c0,5.521-4.478,10-10,10h-200    c-5.514,0-10-4.486-10-10c0-5.521,4.478-10,10-10H339.359z M169.359,412.002v-23c24.939,0,107.161,0,140,0v23H169.359z     M342.672,330.961c-1.074,1.835-1.542,3.939-1.317,6.09c-4.031,17.633-8.06,28.284-9.203,31.949h-12.793h-47.013    c15.475-10.639,28.137-29.405,33.95-50.424c1.473-5.323-1.649-10.832-6.972-12.304c-5.326-1.472-10.833,1.649-12.304,6.972    c-4.593,16.603-14.744,31.788-26.488,39.625L236.332,369c-13.237,0-78.514,0-89.764,0l-4.295-12.887    c-15.364-45.99,10.526-88.161,50.402-98.13c24.835-6.213,49.858-22.344,70.578-45.465c7.593-5.371,13.807-12.567,17.989-20.931    l7.06-14.11c2.471-4.939,0.471-10.946-4.469-13.417c-4.939-2.471-10.946-0.47-13.418,4.468l-7.061,14.112    c-9.04,18.076-31.053,25.582-49.306,16.532l-0.03-0.016c-0.074-0.04-0.149-0.078-0.224-0.116    c-22.078-11.051-47.68-10.609-68.868-0.002c-2.687,1.343-5.556,2.024-8.528,2.024c-7.246,0-13.784-4.014-17.039-10.429    l-0.182-0.363l23.343-7.781c5.239-1.747,8.071-7.41,6.325-12.649c-1.747-5.24-7.408-8.072-12.649-6.325l-25.432,8.477    c-4.745-16.717,2.718-34.872,18.972-42.994c2.86-1.319,6.306-3.619,12.224-5.015c2.754-0.651,5.6-0.981,8.458-0.981    c21.666,0,41.142-12.04,50.824-31.416l4.295-8.584h5.541c16.834,0,32.853-5.287,46.175-15.062    c-1.383,7.297-3.68,14.274-6.838,20.587c-2.471,4.939-0.471,10.946,4.469,13.417c4.939,2.471,10.946,0.471,13.418-4.468    c9.995-19.978,13.117-44.913,8.174-68.286c15.031,10.463,26.267,26.969,30.81,46.203c1.376,5.845,2.073,11.769,2.073,17.608    c0,1.075,0.173,2.143,0.514,3.163l24.189,72.569c9.864,29.593,15.297,64.137,15.297,97.268    C349.359,286.905,347.2,308.912,342.672,330.961z M398.893,287.359l-7.731,38.642h-27.179c0.45-2.531,0.883-5.068,1.278-7.609    c2.72-17.549,4.099-35.176,4.099-52.391c0-35.224-5.797-72.014-16.323-103.592l-23.01-69.032    c28.84,23.81,50.771,55.578,62.645,91.197C403.303,216.468,405.57,253.933,398.893,287.359z"></path>
	</g>
</g>
</svg></button>
<button><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" fill="white">
<g>
	<g>
		<path d="M416,352c-5.52,0-10,4.48-10,10c0,5.52,4.48,10,10,10c5.52,0,10-4.48,10-10C426,356.48,421.52,352,416,352z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M256,352c-5.52,0-10,4.48-10,10c0,5.52,4.48,10,10,10s10-4.48,10-10C266,356.48,261.52,352,256,352z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M76,106c-5.52,0-10,4.48-10,10s4.48,10,10,10s10-4.48,10-10S81.52,106,76,106z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M454.743,301.362c-16.373-27.55-36.631-49.257-58.584-63.149c0.357-0.325,0.708-0.658,1.052-1.001    C402.879,231.543,406,224.01,406,216c0-3.904-0.758-7.633-2.121-11.057C416.61,201.473,426,189.815,426,176    c0-7.457-2.708-14.499-7.655-20.009C423.101,150.68,426,143.673,426,136c0-7.453-2.705-14.491-7.647-20    c4.942-5.509,7.647-12.547,7.647-20c0-16.542-13.458-30-30-30h-22.473l12.224-53.784c0.675-2.966-0.038-6.078-1.936-8.455    C381.918,1.384,379.042,0,376,0h-80c-3.042,0-5.918,1.385-7.815,3.762c-1.898,2.377-2.61,5.489-1.936,8.456l3.567,15.694    l-23.467,11.734c-10.798,5.399-20.602,12.465-29.139,21.003c-13.968,13.966-31.873,22.549-51.21,24.76V76c0-5.523-4.477-10-10-10    H36c-5.523,0-10,4.477-10,10v160c0,5.523,4.477,10,10,10h140c5.523,0,10-4.477,10-10v-10h3.68c16.385,0,32.578,2.627,48.125,7.806    c10.552,3.521,21.323,6.287,32.234,8.29c-19.715,13.911-37.862,34.161-52.781,59.266C197.685,334.296,186,371.918,186,402    c0,33.631,14.455,61.732,41.802,81.267C254.117,502.064,291.531,512,336,512s81.883-9.936,108.197-28.733    C471.545,463.732,486,435.631,486,402C486,371.917,474.315,334.296,454.743,301.362z M166,106h-50c-5.523,0-10,4.477-10,10    s4.477,10,10,10h50v100H46V86h120V106z M363.473,20l-10.455,46h-34.035l-10.454-46H363.473z M244.131,214.833    C226.537,208.972,208.217,206,189.68,206H186V105.534c24.69-2.282,47.601-12.993,65.352-30.743    c7.015-7.015,15.069-12.821,23.94-17.257l19.087-9.543L298.472,66H296c-5.522,0-10,4.477-10,10s4.478,10,10,10    c21.954,0,78.309,0,100,0c5.514,0,10,4.486,10,10c0,2.668-1.041,5.179-2.931,7.068c-1.89,1.891-4.401,2.932-7.069,2.932h-40    c-5.522,0-10,4.477-10,10s4.478,10,10,10h40c5.521,0,10,4.479,10,10c0,5.514-4.486,10-10,10h-40c-5.522,0-10,4.477-10,10    s4.478,10,10,10h40c5.521,0,10,4.479,10,10c0,5.514-4.486,10-10,10c-13.99,0-26.01,0-40,0c-5.522,0-10,4.477-10,10s4.478,10,10,10    h20c5.514,0,10,4.486,10,10c0,5.522-4.479,10-10,10h-63.08c-3.141,0-6.402-0.074-9.697-0.22    C283.115,224.89,263.236,221.208,244.131,214.833z M432.572,466.993C409.67,483.353,376.275,492,336,492    c-40.275,0-73.67-8.647-96.573-25.007C217.559,451.372,206,428.898,206,402c0-26.642,10.636-60.443,28.45-90.42    c19.44-32.71,44.446-55.995,70.53-65.731c2.687,0.09,5.354,0.151,7.939,0.151h54.503c25.94,9.825,50.788,33.038,70.128,65.58    C455.364,341.556,466,375.358,466,402C466,428.898,454.441,451.372,432.572,466.993z"></path>
	</g>
</g>
<g>
	<g>
		<path d="M341.178,353.875c-14.907-7.879-24.678-13.609-24.678-21.165c0-11.028,8.972-20,20-20s20,8.972,20,20    c0,5.523,4.478,10,10,10c5.522,0,10-4.477,10-10c0-18.604-12.767-34.282-30-38.734V282.71c0-5.523-4.478-10-10-10    c-5.522,0-10,4.477-10,10v11.266c-17.233,4.452-30,20.13-30,38.734c0,20.171,18.771,30.093,35.331,38.847    c14.901,7.877,24.669,13.604,24.669,21.153c0,11.028-8.972,20-20,20s-20-8.972-20-20c0-5.523-4.478-10-10-10    c-5.522,0-10,4.477-10,10c0,18.604,12.767,34.282,30,38.734v11.266c0,5.523,4.478,10,10,10c5.522,0,10-4.477,10-10v-11.266    c17.233-4.452,30-20.13,30-38.734C376.5,372.546,357.734,362.627,341.178,353.875z"></path>
	</g>
</g>
</svg></button>
<label class="label" for="checkbox">Click Me</label>
</div>
            
          
!
            
              // @import "compass";

$d: 9em;

*,
*::before,
*::aftre {
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.popping-menu {
  position: relative;
  width: 10em;
  height: 10em;
  display: flex;
  justify-content: center;
  align-items: center;
  button {
    position: absolute;
    display: block;
    width: 4em;
    height: 4em;
    padding: 0 1em;
    appearance: none;
    background: #FFB66F;
    border: none;
    transition: all 0.3s ease-in-out;
    transform: translate(0, 0) rotate(360deg);
    opacity: 0;
    border-radius: 50%;
    color: white;
  }  
}
.popping-menu {
  .checkbox {
    display: none;
  }
  .checkbox:checked {
    ~ button {
      @import "compass";

      $per: 180 / 4;
      @for $i from 1 through 6 {
        &:nth-of-type(#{$i}) {
          $angle: $per * ($i - 1) * 1deg + 180deg;
          $x: cos($angle) * $d;
          $y: sin($angle) * $d;
          opacity: 1;
          transition-delay: 0.1s * $i;
          transform: translate($x, $y) rotate(0deg) ;
        }
      }
    }
  }
}

.popping-menu {
  .label {
    z-index: 10;
    border-radius: 50%;
    background: #4791FF;
    width: 6em;
    height: 6em;
    line-height: 6em;
    text-align: center;
    display: block;
    color: white;
    cursor: pointer;
    user-select: none;
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console