[Support request] GenerateBlocks Button animation

Home Forums Support [Support request] GenerateBlocks Button animation

Home Forums Support GenerateBlocks Button animation

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1548517
    Tom

    Hey guys, I’ve just found a nice example of button animation. Is it doable in GenerateBlocks?

    Example video

    #1549202
    David
    Staff
    Customer Support

    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 ?

    #1549244
    Tom

    sure thing. click here

    #1550581
    Elvin
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.