How to Make a Holographic Button with CSS

August 31, 2020
POSTED IN BLOGS › Design    

We experimented with a holographic button on our site last year, and we’ve been hooked ever since. (Seriously…????????)

That’s why⁠—in true Funnel Gorgeous fashion⁠—we wanted to spread the love! (Or in this case, the tutorial and code for the button of our dreams.)

Cathy explains how to make a holographic button with CSS, then goes into detail about button customization. Follow along to learn how to make the button itself, then set the background image, speed, and movement.

Join Cathy as she walks you through how to create a holographic button of your very own:

Use the CSS code below to make this magic happen!

background-image: url('YOUR-IMAGE-URL-HERE');
background-size: 600% 600%;
animation: gradientBG 5s ease infinite;
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }

We made this button within ClickFunnels, but you can build this out in any page editor!

If you’re loving this post, we’d love to hear about it! Share in our Facebook group or tag us on Instagram…and show us how you used your new holographic button!

Share On:

Newsletter sign up

    Let’s be Friends

    © 2018-2024 Funnel Gorgeous LLC

    Marketing Magic for Flawless Funnels™