<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.