.animated-btn {
  --primary-color: #dfdfe1;
  --secondary-color: #000000;
  --text-color: #181818;
  --clicked-color: #d7d7d9;
  position: relative;
  overflow: hidden;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  column-gap: 8px;
  flex-shrink: 0;
  color: var(--text-color);
  text-align: center;
  outline: none;
  border: none;
  border-radius: 50px;
  background: var(--primary-color);
  box-shadow: 0px 0px 6px 0px var(--primary-color);
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  transition: 0.2s ease-in-out;
}
.hover {
  z-index: 1020;
  width: 100px;
}
.active-bg {
  position: absolute;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTQ0MCAzMjAiPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMSIgZD0iTTAsMjg4TDkuNiwyNDUuM0MxOS4yLDIwMywzOCwxMTcsNTgsOTZDNzYuOCw3NSw5NiwxMTcsMTE1LDEzOC43QzEzNC40LDE2MCwxNTQsMTYwLDE3MywxMzguN0MxOTIsMTE3LDIxMSw3NSwyMzAsODBDMjQ5LjYsODUsMjY5LDEzOSwyODgsMTQ5LjNDMzA3LjIsMTYwLDMyNiwxMjgsMzQ2LDE0OS4zQzM2NC44LDE3MSwzODQsMjQ1LDQwMywyNDBDNDIyLjQsMjM1LDQ0MiwxNDksNDYxLDExNy4zQzQ4MCw4NSw0OTksMTA3LDUxOCwxMzMuM0M1MzcuNiwxNjAsNTU3LDE5Miw1NzYsMjA4QzU5NS4yLDIyNCw2MTQsMjI0LDYzNCwxODYuN0M2NTIuOCwxNDksNjcyLDc1LDY5MSw1OC43QzcxMC40LDQzLDczMCw4NSw3NDksMTI4Qzc2OCwxNzEsNzg3LDIxMyw4MDYsMTkyQzgyNS42LDE3MSw4NDUsODUsODY0LDU4LjdDODgzLjIsMzIsOTAyLDY0LDkyMiw2NEM5NDAuOCw2NCw5NjAsMzIsOTc5LDUzLjNDOTk4LjQsNzUsMTAxOCwxNDksMTAzNywxNjBDMTA1NiwxNzEsMTA3NSwxMTcsMTA5NCwxMTJDMTExMy42LDEwNywxMTMzLDE0OSwxMTUyLDE0NEMxMTcxLjIsMTM5LDExOTAsODUsMTIxMCw4NS4zQzEyMjguOCw4NSwxMjQ4LDEzOSwxMjY3LDE3NkMxMjg2LjQsMjEzLDEzMDYsMjM1LDEzMjUsMjEzLjNDMTM0NCwxOTIsMTM2MywxMjgsMTM4MiwxMTJDMTQwMS42LDk2LDE0MjEsMTI4LDE0MzAsMTQ0TDE0NDAsMTYwTDE0NDAsMEwxNDMwLjQsMEMxNDIwLjgsMCwxNDAyLDAsMTM4MiwwQzEzNjMuMiwwLDEzNDQsMCwxMzI1LDBDMTMwNS42LDAsMTI4NiwwLDEyNjcsMEMxMjQ4LDAsMTIyOSwwLDEyMTAsMEMxMTkwLjQsMCwxMTcxLDAsMTE1MiwwQzExMzIuOCwwLDExMTQsMCwxMDk0LDBDMTA3NS4yLDAsMTA1NiwwLDEwMzcsMEMxMDE3LjYsMCw5OTgsMCw5NzksMEM5NjAsMCw5NDEsMCw5MjIsMEM5MDIuNCwwLDg4MywwLDg2NCwwQzg0NC44LDAsODI2LDAsODA2LDBDNzg3LjIsMCw3NjgsMCw3NDksMEM3MjkuNiwwLDcxMCwwLDY5MSwwQzY3MiwwLDY1MywwLDYzNCwwQzYxNC40LDAsNTk1LDAsNTc2LDBDNTU2LjgsMCw1MzgsMCw1MTgsMEM0OTkuMiwwLDQ4MCwwLDQ2MSwwQzQ0MS42LDAsNDIyLDAsNDAzLDBDMzg0LDAsMzY1LDAsMzQ2LDBDMzI2LjQsMCwzMDcsMCwyODgsMEMyNjguOCwwLDI1MCwwLDIzMCwwQzIxMS4yLDAsMTkyLDAsMTczLDBDMTUzLjYsMCwxMzQsMCwxMTUsMEM5NiwwLDc3LDAsNTgsMEMzOC40LDAsMTksMCwxMCwwTDAsMFoiPjwvcGF0aD48L3N2Zz4=");
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  transform: translateY(-150%);
  transition: 0.2s ease-in-out;
}
.animated-btn:hover .active-bg {
  transform: translateY(0);
}
.animated-btn:hover {
  box-shadow: 0px 0px 14px 0px var(--primary-color);
}
.animated-btn:active {
  transform: scale(0.95);
}