Button Effects Tutorial

These examples demonstrate how to add hover effects to your buttons (and images) in BizStackPro.

I'll show you each effect starting with a bare button, then progressing through what I consider to be the best effects for a professional look on your pages.

This page is a result of a video I recorded for YouTube. You can watch the video here, then come back to this page for more information. Please be sure to subscribe to my channel and hit the thumbs up on the video.

How to Add Custom Effects to Buttons Using CSS Thumbnail

This is your basic button. I have added a 3px solid white border with a 4px radius on each corner. I have also set the top and bottom padding to 10px. I changed the width to 'fluid' so that the button does not consume the width of the column.

The first effect I will do is change the font color when you move your mouse over the button. Here's the CSS code:

.cbutton-e97zT1TdAm:hover {
  /* Change the font color */
    color: #ffc107;
}

Now I'll change the border color. Here's the CSS code:

.cbutton-VDRF514u9P:hover {
  /* Change the font color */
    color: #ffc107;
  /* Change the border color */
    border-color: #ffc107;
}

You can also change the background color. As you can see adding all these effects can be a major distraction. Often times, less is more. Here's the CSS code:

.cbutton-Ol_wMLPxOS:hover {
  /* Change the font color */
    color: #0d6efd;
  /* Change the border color */
    border-color: #0d6efd;
  /* Change the background color */
    background-color: white;
}

You can also add a zoom effect. Here's the CSS code:

.cbutton-NJK1kfOGJP:hover {
  /* Change the font color */
    color: #0d6efd;
  /* Change the border color */
    border-color: #0d6efd;
  /* Change the background color */
    background-color: white;
  /* Add zoom effect */
    transform: scale(1.2);
}

I like to slow down the speed of the effect a bit. Here I've added a 0.4 second delay to both the onset and release of the effect. Here's the CSS code:

.cbutton-Zv8j8k2Hyd {
  /* Slow down the hover effect */
    transition-duration: 0.4s;
}

.cbutton-Zv8j8k2Hyd:hover {
  /* Change the font color */
    color: #0d6efd;
  /* Change the border color */
    border-color: #0d6efd;
  /* Change the background color */
    background-color: white;
  /* Add zoom effect */
    transform: scale(1.1);
}

DON'T FORGET!!! Effects can be a distraction. There are so many settings that you can change using CSS, but probably should limit the effects to less than 4. Be sure that your colors are complementary. Always test your effects, maybe even ask for trusted friends and/or colleagues to give their opinion (then don't be upset when they give it).

What is BizStackPro?

BizStackPro is a new way to get your business done. BizStackPro contains all of the tools you need to build your online presence. Even better, you get incredible support from a team of people who know how to do it.

We are a group of like minded entrepreneurs who help each other develop innovative and eye catching ways to market your product, service, or opportunity to the world.

What better way to grow your business than to utilize the experience and expertise of others?!?!

Incredible OFFER!!!

Get the BizStackPro Premium Plan for ONLY $297!

This includes access to templates, tools, and BONUSES!!

© 2024 Andy Delgado - Nacogdoches, TX USA

All rights reserved.

This site is not part of, or endorsed by, Facebook, Google, Snapchat, TikTok, X or any social media platform in any way.

All product names, logos, and brands are property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement.

FACEBOOK is a trademark of Meta, Inc. YOUTUBE and GOOGLE are trademarks of GOOGLE, LLC. SNAPCHAT is a trademark of SNAP, Inc. X is a trademark of X Corp.