How can we help you today?

How to Make a Transparent Button (Animated on Mouse Hover)

Bring more life to your SharePoint page using transparent ShortPoint buttons, which will react to the mouse hover, just like in this example:


Please check the steps below to find out how you can create the same effect on your Intranet (or public) page.


Step 1. Insert a ShortPoint Button.


  • Find a place in your page.
  • Open the Page Builder and choose Button.
  • Name the Button.
  • Press Insert:




Step 2. Add custom CSS.


  • Copy this CSS coding from here:


background-color: transparent !important;
border-color: currentColor !important;


  • Open your SharePoint page.
  • Press the cogwheel of the Button to open the settings.
  • Switch to Custom CSS tab.
  • Paste the coding into the Custom CSS field.
  • Press Update:



Done! Now, your button is transparent and responds to hovering the mouse over it.


TIP: Changing the Color


If you would like to change the color of the Button title (which will as well change the color of the Button border so it matches), please choose a desired color in the Settings tab, in the Text Color field.

Choose one of the available colors from the drop-down (why do I see this list of colors? can I change them?) or indicate a custom color in the Hex format by typing it into the same field (Hex color reference here):



Thank you for your attention!




Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 51 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more