:root {
--background: #2C2C2C;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Mulish';
font-size: 16px;
}
.background {
background-color: var(--background);
display: grid;
place-items: center;
height: 100vh;
}
.button {
color: #fff;
cursor: pointer;
font-size: 1rem;
line-height: 2.5rem;
max-width: 160px;
width: 100%;
letter-spacing: 0.3rem;
font-weight: 600;
position: relative;
text-decoration: none;
text-transform: uppercase;
display: flex;
justify-content: center;
transition: all 1s ease-in;
}
.button:hover {
color: #FF9950;
}
.button svg {
height: 40px;
left: 0;
top: 0;
position: absolute;
width: 100%;
}
.button rect {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 450, 0;
transition: all 0.5s linear;
}
.button:hover rect {
stroke-width: 5;
stroke-dasharray: 20, 300;
stroke-dashoffset: 48;
stroke: #FF9950;
transition: all 2s cubic-bezier(
0.22, 1, 0.25, 1
);
}