<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;
        }
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.