- This topic has 3 replies, 3 voices, and was last updated 3 years, 4 months ago by Elvin.
Viewing 4 posts - 1 through 4 (of 4 total)
-
AuthorPosts
-
November 25, 2020 at 11:11 pm #1548517Tom
Hey guys, I’ve just found a nice example of button animation. Is it doable in GenerateBlocks?
November 26, 2020 at 3:25 am #1549202DavidStaffCustomer SupportHi 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 ?
November 26, 2020 at 3:37 am #1549244Tomsure thing. click here
November 26, 2020 at 12:53 pm #1550581ElvinStaffCustomer SupportHi,
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 maybetext-[color]
) class on your button block. -
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.