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 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:


sample transparent button


TABLE OF CONTENTS


Prerequisites


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.

SharePoint edit

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

ShortPoint edit mode


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.


open Button settings


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.


Copy and paste custom CSS


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.

update Text color


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:

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 54 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