Yeasir Arafat

Web Designer & Developer

Back

The Right Way to Add a Shine Effect in Your Bricks Builder Buttons

Hover over the button above to see the shine effect in action. Notice how the light sweeps across smoothly in one direction.

Here’s how to add this same effect to your Bricks Builder buttons in under 5 minutes.

Step 1: Add the CSS Code

First, you’ll add the shine effect code to your site’s global CSS. This way, you can use it on any button without repeating code.

/* --- The Definitive Button Shine Effect --- */
.shine-effect {
  position: relative;
  overflow: hidden;
}

.shine-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 75%;
  height: 100%;
  
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
}

.shine-effect:hover::before {
  left: 125%;
  transition: left 0.8s ease-in-out;
}

Go to your WordPress dashboard:

  • Navigate to Bricks → Settings → Custom Code
  • Paste the CSS code into the Custom CSS field
  • Click Save Settings

That’s it for the setup. The shine-effect class is now available across your entire site.

Step 2: Apply the Effect to Your Button

Now you’ll tell specific buttons to use the shine effect.

  • Edit any page in Bricks Builder
  • Select the button you want to enhance
  • Find the CSS Classes field in the settings panel
  • Type shine-effect and press Enter

Save your page and check it live. Hover over the button to see the shine animation in action.

How It Works

The effect uses a transparent-to-white gradient that moves across the button on hover. The animation only plays forward, so there’s no awkward reverse when you move your mouse away.

The shine starts off-screen on the left, sweeps across the button, and ends off-screen on the right. When you stop hovering, it simply resets to the starting position without animating backward.

Why This Method Works Better

You might wonder why we’re using a global CSS class instead of adding the code directly to each button. Here’s why this approach is better:

  • One piece of code works for unlimited buttons
  • Easy to update the animation speed or style later
  • Keeps your site’s code clean and organized
  • Faster loading since the code isn’t duplicated

You can now add shine-effect to any button, link, or element that needs this animation.

Quick Troubleshooting

If the effect isn’t working:

  • Check that you saved the CSS in the right place
  • Make sure the class name is spelled correctly: shine-effect
  • Try clearing your browser cache and refreshing the page

That’s it. Your buttons now have a smooth, professional shine effect that activates on hover.