GenerateBlocks Button animation

Hi there,

probably with some CSS, got a couple of ideas but be nice to see how that site did it - could you link me to the site with that button ?

sure thing. click here

Hi,

The site you've referenced uses these CSS for its button animation.

.link-button svg{
  margin-left: 8px;
  width: 11px;
  height: 11px;
  vertical-align: middle;
  display: inline;
}

html:not(.mobile) .link-button svg {
  transition: fill 0.35s;
}

.link-button {
  position: relative;
  display: inline-block;
}

.link-button.text-blue:before {
  background: #2F80ED;
}

.link-button.text-green:before {
  background: #27AE60;
}

.link-button.text-yellow:before {
  background: #F2C94C;
}

.link-button.text-orange:before {
  background: #f49a40;
}

.link-button.text-red:before {
  background: #F44336;
}

.link-button.text-purple:before {
  background: #9B51E0;
}

.link-button.text-pink:before {
  background: #df7578;
}

.link-button.text-teal:before {
  background: #56CCF2;
}

.link-button svg.arrow {
  fill: #fff !important;
  margin-left: 8px;
  width: 13px;
  height: 13px;
}

.link-button.text-blue:not(:hover) svg {
  fill: #2F80ED !important;
}

.link-button.text-green:not(:hover) svg {
  fill: #27AE60 !important;
}

.link-button.text-yellow:not(:hover) svg {
  fill: #F2C94C !important;
}

.link-button.text-orange:not(:hover) svg {
  fill: #f49a40 !important;
}

.link-button.text-red:not(:hover) svg {
  fill: #F44336 !important;
}

.link-button.text-purple:not(:hover) svg {
  fill: #9B51E0 !important;
}

.link-button.text-pink:not(:hover) svg {
  fill: #df7578 !important;
}

.link-button.text-teal:not(:hover) svg {
  fill: #56CCF2 !important;
}

.link-button:not(.center):hover {
  transform: translateX(15px);
}

.link-button:hover {
  color: #fff !important;
}

html:not(.mobile) .link-button:hover {
  transition: 0.35s 0.15s cubic-bezier(0.37, 1.62, 0.49, 0.9);
}

html:not(.mobile) .link-button:hover svg {
  transition: fill 0.35s 0.15s cubic-bezier(0.37, 1.62, 0.49, 0.9);
}

html.mobile .link-button:hover {
  transition: 0s;
}

.link-button:not(.center):active {
  transform: translateX(15px) translateY(2px);
}

html:not(.mobile) .link-button:not(.center):active {
  transition: 0.25s;
}

.link-button:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: -1;
  opacity: .2;
}

html:not(.mobile) .link-button:before {
  transition: 0.35s;
}

.link-button:hover:before {
  opacity: 1;
  bottom: -20px;
  transform: translate(-15px, -10px);
  width: calc(100% + 30px);
  height: calc(100% + 20px);
  border-radius: 6px;
}

html:not(.mobile) .link-button:hover:before {
  transition: height 0.15s,width 0.35s 0.15s cubic-bezier(0.37, 1.62, 0.49, 0.9),transform 0.35s 0.15s cubic-bezier(0.37, 1.62, 0.49, 0.9),color 0.35s,bottom 0.35s cubic-bezier(0.37, 1.62, 0.49, 0.9);
}

You can add these CSS and try adding link-button (and maybe text-[color]) class on your button block.