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

Bring more life to your SharePoint page using transparent buttons that will animate and become a solid button when the mouse hovers over it. This is easy to do with ShortPoint.

Here is an example of what it would look like:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint web part
  • Step 2: Open the Button Design Element settings
  • Step 3: Copy and paste the custom CSS
  • Step 4: (Optional) Update the text color of the Button Design Element
  • Step 5: Apply edits and save changes

Prerequisites

• You have the latest ShortPoint SPFx version installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.
• You have added a Button Design Element to your SharePoint page through the ShortPoint Page Builder.

Note: This does not apply to buttons added through the Text Design Element rich text editor.

Interactive Tutorial

Go through the interactive tutorial to view the steps to create transparent buttons.

You will need the custom CSS below to complete the process:

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

Step-by-step Tutorial

We have also listed the detailed steps on how to create transparent buttons below:

Step 1: Edit the ShortPoint web part

• Edit the SharePoint page.

• Select the ShortPoint web page and enter edit mode by clicking the pencil icon.

Step 2: Open the Button Design Element settings

• Go to the Button Design Element on your page.
• Select the label to expand the action buttons.
• Click the cogwheel icon to open the settings window.

Step 3: Copy and paste the custom CSS

We will be using this custom CSS code:

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

• Copy the custom CSS code.
• Switch to the Custom CSS tab on the Button settings window.
• Paste the code on the custom CSS field.

Step 4: (Optional) Update the text color of the Button Design Element

When the button becomes transparent, you may need to adjust the color of its text to make it more visible.

• Go to the Design tab.
• Change the color in the Text color field. You can select from the dropdown or assign a specific color using the color picker.

Step 5: Apply edits and save changes

• Once complete, press the green checkmark button to apply your changes.
• Hit Save to commit your edits to the page.

You now have transparent buttons on your page. Explore more options to add spice to your design with ShortPoint.

Related articles:

• Introduction to ShortPoint Button Design Element
• How to Customize the Button Design Element in Live Mode
• How to Align Button Design Elements Inside a Panel