Pen Settings

HTML

CSS

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

JavaScript

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.

+ 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.

Behavior

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.

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="menu">
        <h3>Your Settings</h3>
        <ul>
            <li>
                <a href="#">
                    <svg><use xlink:href="#cog"></svg>
                    <span>Edit Personal Info</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg><use xlink:href="#picture"></svg>
                    <span>Set Profile Picture</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg><use xlink:href="#lock"></svg>
                    <span>Change Password</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="menu-btn-container">
        <button aria-pressed="false" aria-label="Open Menu" class="menu-btn"></button>
        <span class="menu-btn-pulse"></span>
        <span class="menu-btn-pulse"></span>
    </div>
    <svg>
    <symbol id="cog" viewBox="0 0 1024 1024">
        <path d="M390.71 1008.755c-2.109 0-4.248-0.262-6.378-0.81-45.976-11.803-90.149-30.042-131.291-54.21-11.923-7.003-16.13-22.21-9.501-34.344 
            8.15-14.925 12.459-31.866 12.459-48.992 0-56.464-45.936-102.4-102.4-102.4-17.125 0-34.066 4.309-48.992 12.459-12.133 6.627-27.339 
            2.421-34.342-9.501-24.17-41.142-42.408-85.315-54.211-131.293-3.333-12.989 3.92-26.349 16.629-30.629 41.699-14.037 69.717-53.034 
            69.717-97.037s-28.018-83-69.718-97.040c-12.707-4.278-19.962-17.638-16.627-30.627 11.803-45.976 30.042-90.149 54.211-131.291 7.003-11.923 22.21-16.13
            34.344-9.501 14.923 8.15 31.864 12.459 48.99 12.459 56.464 0 102.4-45.936 102.4-102.4 0-17.126-4.309-34.067-12.459-48.99-6.629-12.134-2.422-27.341 
            9.501-34.344 41.141-24.168 85.314-42.408 131.291-54.211 12.994-3.334 26.349 3.92 30.627 16.627 14.040 41.701 53.037 69.718 97.040 69.718s83-28.018 
            97.038-69.717c4.28-12.71 17.645-19.965 30.629-16.629 45.976 11.802 90.15 30.042 131.293 54.211 11.922 7.003 16.128 22.208 9.501 34.342-8.152 
            14.926-12.461 31.867-12.461 48.992 0 56.464 45.936 102.4 102.4 102.4 17.126 0 34.067-4.309 48.992-12.459 12.138-6.629 27.341-2.421 34.344 9.501 
            24.166 41.141 42.406 85.314 54.21 131.291 3.334 12.989-3.918 26.349-16.627 30.627-41.701 14.040-69.718 53.037-69.718 97.040s28.018 
            83 69.718 97.038c12.707 4.28 19.962 17.638 16.627 30.629-11.803 45.976-30.042 90.15-54.21 131.291-7.005 11.925-22.208 16.128-34.344 
            9.502-14.926-8.152-31.867-12.461-48.992-12.461-56.464 0-102.4 45.936-102.4 102.4 0 17.125 4.309 34.066 12.461 48.992 6.627 12.136 2.421
            27.341-9.502 34.344-41.141 24.166-85.314 42.406-131.291 54.21-12.992 3.336-26.349-3.918-30.629-16.627-14.038-41.701-53.035-69.718-97.038-69.718s-83
            28.018-97.040 69.718c-3.578 10.624-13.502 17.437-24.25 17.437zM512 870.4c57.715 0 109.693 32.138 135.917 82.029 26.637-8.218 52.507-18.875 
            77.299-31.846-5.541-16.077-8.416-33.075-8.416-50.182 0-84.696 68.904-153.6 153.6-153.6 17.107 0 34.106 2.875 50.181 8.418 12.971-24.792 23.63-50.662
            31.846-77.299-49.89-26.226-82.027-78.203-82.027-135.918s32.138-109.691 82.029-135.918c-8.218-26.637-18.875-52.506-31.846-77.299-16.077 5.542-33.074 
            8.418-50.182 8.418-84.696 0-153.6-68.904-153.6-153.6 0-17.107 2.875-34.106 8.418-50.181-24.792-12.971-50.662-23.63-77.299-31.846-26.226 49.89-78.203 
            82.027-135.918 82.027s-109.691-32.138-135.917-82.027c-26.637 8.216-52.507 18.874-77.299 31.846 5.542 16.075 8.416 33.072 8.416 50.181 0 84.696-68.904 
            153.6-153.6 153.6-17.109 0-34.106-2.874-50.181-8.418-12.973 24.794-23.63 50.662-31.846 77.299 49.89 26.227 82.027 78.203 82.027 135.918s-32.138 
            109.693-82.027 135.917c8.216 26.637 18.875 52.507 31.846 77.299 16.075-5.541 33.074-8.416 50.181-8.416 84.696 0 153.6 68.904 153.6 153.6 0 17.109-2.875
            34.106-8.418 50.181 24.794 12.971 50.662 23.63 77.299 31.846 26.227-49.89 78.203-82.027 135.918-82.027z"></path>
        <path d="M512 665.6c-84.696 0-153.6-68.904-153.6-153.6s68.904-153.6 153.6-153.6 153.6 68.904 153.6 153.6-68.904 153.6-153.6 153.6zM512 409.6c-56.464 0-102.4
             45.936-102.4 102.4s45.936 102.4 102.4 102.4c56.464 0 102.4-45.936 102.4-102.4s-45.936-102.4-102.4-102.4z"></path>
        </symbol>
        <symbol id="picture" viewBox="0 0 1024 1024">
        <path d="M947.2 1024h-870.4c-42.347 0-76.8-34.451-76.8-76.8v-870.4c0-42.347 34.453-76.8 76.8-76.8h870.4c42.349 0 76.8 34.453 76.8 76.8v870.4c0 42.349-34.451
        76.8-76.8 76.8zM76.8 51.2c-14.115 0-25.6 11.485-25.6 25.6v870.4c0 14.115 11.485 25.6 25.6 25.6h870.4c14.115 0 25.6-11.485 25.6-25.6v-870.4c0-14.115-11.485-25.6-25.6-25.6h-870.4z"></path>
        <path d="M665.6 460.8c-56.464 0-102.4-45.936-102.4-102.4s45.936-102.4 102.4-102.4 102.4 45.936 102.4 102.4-45.936 102.4-102.4 102.4zM665.6 307.2c-28.232 0-51.2
        22.968-51.2 51.2s22.968 51.2 51.2 51.2 51.2-22.968 51.2-51.2-22.968-51.2-51.2-51.2z"></path>
        <path d="M896 102.4h-768c-14.138 0-25.6 11.462-25.6 25.6v614.4c0 14.139 11.462 25.6 25.6 25.6h768c14.139 0 25.6-11.461 25.6-25.6v-614.4c0-14.138-11.461-25.6-25.6-25.6zM153.6
        598.533l164.318-184.858c4.203-4.728 9.694-7.371 15.462-7.44 5.725-0.090 11.322 2.438 15.638 7.062l283.27 303.502h-478.69v-118.267zM870.4 
        716.8h-168.075l-315.875-338.437c-14.269-15.288-33.312-23.605-53.691-23.325-20.354 0.246-39.214 8.992-53.107 24.621l-126.051 141.808v-367.867h716.8v563.2z"></path>
        </symbol>
        <symbol id="lock" viewBox="0 0 1024 1024">
        <path d="M813.412,360.894h-30.141v-90.424C783.271,120.891,661.579-0.8,512-0.8S240.729,120.891,240.729,270.471v90.423h-30.141
        c-49.859,0-90.424,40.565-90.424,90.424v482.259c0,49.859,40.565,90.424,90.424,90.424h602.823
        c49.859,0,90.424-40.565,90.424-90.424V451.318C903.835,401.459,863.271,360.894,813.412,360.894L813.412,360.894z M301.012,270.471
        c0-116.339,94.649-210.988,210.988-210.988s210.988,94.649,210.988,210.988v90.423H301.012L301.012,270.471L301.012,270.471z
            M843.553,933.576c0,16.619-13.522,30.141-30.141,30.141H210.588c-16.619,0-30.141-13.522-30.141-30.141V451.318
        c0-16.619,13.522-30.141,30.141-30.141h602.823c16.619,0,30.141,13.522,30.141,30.141V933.576z"/>
        </symbol>
    </svg>
</div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html,
body {
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: "Montserrat";
  overflow:hidden;
}
ul,
li {
  list-style-type: none;
}
ul {
  padding-left: 0;
  font-size: 0.875em;
}
li {
  margin: 15px auto;
  padding: 15px 0px;
  border-bottom: 1px solid rgba(175, 175, 175, 0.25);
}
li:last-child {
  border: none;
}
a {
  display: inline-block;
  text-decoration: none;
  color: white;
  display: flex;
  align-items: center;
}
h3 {
  font-size: 20px;
}
.container {
  text-align: center;
}
.menu-btn {
  border: none;
  background: linear-gradient(120deg, #f829ab 25%, #f42977 75%, #f41f5f 100%);
  border-radius: 25px;
  transform: rotate(-45deg) translateZ(0);
  width: 70px;
  height: 70px;
  position: relative;
  cursor: pointer;
  box-shadow: 0px 2px 20px rgba(244, 31, 95, 0.25);
  margin: 15px auto;
}
.menu-btn:focus {
  outline: none;
}
.menu-btn:before,
.menu-btn:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 17px);
  width: 34px;
  height: 2px;
  background: white;
  transition: 0.3s ease all;
  transform: rotate(-45deg) translateZ(0);
}
.menu-btn:after {
  transform: rotate(45deg) translateZ(0);
}
.menu-btn.open:before {
  transform: rotate(0deg);
}
.menu-btn.open:after {
  transform: rotate(90deg);
}
.menu {
  position: relative;
  min-height: 250px;
  min-width: 300px;
  margin: 15px auto;
  border-radius: 24px 24px 24px 4px;
  text-align: left;
  padding: 15px 20px;
  transform: scale(0);
  transform-origin: 50% 50%;
  transition: 0.35s ease all;
  overflow: hidden;
}
.menu > h3 {
  opacity: 0;
}
.menu > ul > li {
  opacity: 0;
}
.menu:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #28334b;
  z-index: -1;
  border-radius: 50%;
  transform: scale(0.5);
}
.menu.active:before {
  animation: 0.2s menuIn 0.15s normal forwards;
  animation-timing-function: ease-in;
}
.active {
  transform: scale(1);
}
.menu.active > h3 {
  transition: 0.2s ease-in 0.2s;
  opacity: 1;
}
.menu.active > ul > li {
  transition: 0.2s ease-in 0.2s;
  opacity: 1;
}
@keyframes menuIn {
  0% {
    transform: scale(0.5);
    border-radius: 50%;
  }
  45% {
    transform: scale(1.25);
    border-radius: 50%;
  }
  100% {
    transform: scale(1);
    border-radius: 24px 24px 24px 4px;
  }
}
@keyframes menuOut {
  from {
    transform: scale(1);
    border-radius: 24px 24px 24px 4px;
  }
  to {
    transform: scale(0.5);
    border-radius: 50%;
  }
}
svg {
  width: 26px;
  height: 26px;
  fill: white;
  margin-right: 10px;
}
.menu-btn-container {
  position: relative;
}
.menu-btn-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: -1;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(248, 41, 171, 0.28);
  filter: blur(3px);
}
.menu-btn-particle {
  width: 6px;
  height: 6px;
  position: absolute;
  display: inline-block;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  z-index: -1;
}

              
            
!

JS

              
                const randomMinMax = (min,max) => {
    return min + Math.random() * (max-min);
}
const button = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu');
const buttonPulse = document.querySelectorAll('.menu-btn-pulse')

const btnHoverTl = new TimelineMax({
    repeat:-1,
    paused:true
}); 
btnHoverTl.fromTo(button,0.8,{
        scale:1
    },{
        scale:1.05
    })
    .to(button,0.6,{
        scale:1
    });

const pulseTl = new TimelineMax({
    repeat:-1,
    onRepeat:() => {
        TweenMax.set(buttonPulse,{scale:0.5})
    }
});

pulseTl.staggerTo(buttonPulse,2,{
        scale:2.5,
        transformOrigin:"center center"
    },0.25,'in')
.staggerTo(buttonPulse,2,{
        opacity:0,
        scale:3.5
    },0.25,'in+=0.25');

button.addEventListener('click',() => {
    menu.classList.toggle('active');
    button.classList.toggle('open');
    // play particles on click
    button.classList.contains('open') ? playParticles()  : null;

    if (button.classList.contains('open')) {
        pulseTl.eventCallback("onRepeat", () => {
            pulseTl.pause();
        })
        btnHoverTl.eventCallback('onRepeat',() => {
            btnHoverTl.pause();
        })
    }
    else {
        pulseTl.eventCallback("onRepeat", null);
        pulseTl.restart();
        btnHoverTl.eventCallback('onRepeat',null)
        btnHoverTl.restart();
    }  
});

button.addEventListener('mouseover',() => { 
    btnHoverTl.play();   
    btnHoverTl.eventCallback("onRepeat", null);
});

button.addEventListener('mouseleave',()=> {
    btnHoverTl.eventCallback("onRepeat", () => {
        btnHoverTl.pause();
    });
});

const colors = ["#F829AB","#F42977","#F41F5F"];
const particleCount = 8;
const btnContainer = document.querySelector('.menu-btn-container');

// create a few span elements
const createParticles = () => {    
    for (let i = 0; i < particleCount; i++) {   
        // create element
        const particle = document.createElement('span');
        // assign class to element
        particle.setAttribute('class','menu-btn-particle')
        btnContainer.appendChild(particle);
    }
};

createParticles();

const particle = document.querySelectorAll('.menu-btn-particle');

randomizeParticles = () => {
    let color = colors[(Math.random() * colors.length) | 0];
    TweenMax.set(particle,{x:0,y:0,backgroundColor:() => color });
    TweenMax.set(particle,{scale:() => randomMinMax(0.35,1)});
    TweenMax.set(particle,{opacity:() => randomMinMax(0.25,1)});
}

randomizeParticles();


playParticles = () => {
  const particleTl = new TimelineMax();
  particleTl.staggerTo(particle,0.5,{ cycle: {
    physics2D: () => {
      return {
        velocity:randomMinMax(145,165),
        angle:randomMinMax(180,325),
        gravity:randomMinMax(215,225)        
      }   
    }
  }},'in')
    .to(particle,0.4,{scale:0,opacity:0,onComplete:() => {
      randomizeParticles();
    }},'in')
};
              
            
!
999px

Console