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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 64"><path d="M40 44c0 9.925-8.075 18-18 18h-2c-9.925 0-18-8.075-18-18v-4c0-2.2 1.8-4 4-4h10c.347 0 .679.059 1 .142V37.5c0 .276-.224.5-.5.5h-4c-.276 0-.5.224-.5.5s.224.5.5.5H17c.552 0 1-.448 1-1v-1.443c1.14.664 1.918 1.865 1.982 3.261.099 2.29-1.711 4.182-3.979 4.182h-5c-.552 0-1 .448-1 1s.448 1 1 1h4.748c2.134 0 4.086-1.072 5.222-2.721C22.119 45.006 24.106 46 26 46c3.308 0 6-2.692 6-6V12c0-2.206 1.794-4 4-4s4 1.794 4 4v32zM2 6c0-2.206 1.794-4 4-4s4 1.794 4 4v28H6c-1.535 0-2.936.589-4 1.547V6zm10 17c0-2.2 1.8-4 4-4s4 1.8 4 4v12.537C18.938 34.585 17.539 34 16 34h-4V23zm10 0c0-2.2 1.8-4 4-4s4 1.8 4 4v17c0 2.209-1.791 4-4 4-1.976 0-4-1.601-4-4V23zM36 6c-3.314 0-6 2.686-6 6v6.547C28.936 17.589 27.535 17 26 17c-2.082 0-3.923 1.076-5 2.698C19.923 18.076 18.082 17 16 17c-1.535 0-2.936.589-4 1.547V6c0-3.314-2.686-6-6-6-3.3 0-6 2.7-6 6v38c0 11 9 20 20 20h2c11 0 20-9 20-20V12c0-3.3-2.7-6-6-6zm-8.5 32c.276 0 .5.224.5.5V40c0 1.105-.895 2-2 2-.276 0-.5.224-.5.5s.224.5.5.5c1.657 0 3-1.343 3-3v-2c0-.552-.448-1-1-1h-4.5c-.276 0-.5.224-.5.5s.224.5.5.5h4zM8 27.5c0-.276-.224-.5-.5-.5h-3c-.276 0-.5.224-.5.5s.224.5.5.5h3c.276 0 .5-.224.5-.5zm10 4c0-.276-.224-.5-.5-.5h-3c-.276 0-.5.224-.5.5s.224.5.5.5h3c.276 0 .5-.224.5-.5zm6.5.5h3c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-3c-.276 0-.5.224-.5.5s.224.5.5.5zm13 1h-3c-.276 0-.5.224-.5.5s.224.5.5.5h3c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm0-13h-3c-.276 0-.5.224-.5.5s.224.5.5.5h3c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm-33-5h3c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-3c-.276 0-.5.224-.5.5s.224.5.5.5z" fill-rule="evenodd"/></svg></button>
            
          
!
            
              html,
body {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to left, #403A3E , #BE5869);;
}

svg {
    width: 75px;
    height: 75px;
    fill: #403A3E;
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 104px;
    height: 104px;
    background: #BE5869;
    border: none;
    border-radius: 50%;
    box-shadow: 10px 10px 33px #403A3E;
    outline: none;
    &:before,
    &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 99px;
        height: 99px;
        border-radius: 50%;
        border: 2px solid rgba(#403A3E, 0.7);
        filter: blur(0);
        transform-origin: 50%;
        z-index: -1;
    }
    &:hover {
        &:before,
        &:after{
            border-color: transparent;
            filter: blur(2px);
            transform: scale(4);
            transition: 1000ms transform ease, 2100ms blur ease, 900ms border-color ease;
        }
        &:after {
            transition-delay: 100ms;
        }
    }
}
            
          
!
999px
Loading ..................

Console