How to Add Gradient Effect to the Button Design Element Using Custom CSS

By default, you can only apply solid colors to the Button Design Element:

With Custom CSS, you can add a gradient effect to the Button Design Element. Follow the steps below to learn how.

Quick Walkthrough

1. Go to the SharePoint page you want to use and Edit the ShortPoint web part.
2. Copy the CSS of the gradient style you want to apply. You can see the Gradient Style section to see all the styles you can use.
3. Edit the Button Design Element.
4. Go to the Custom CSS tab and paste the code.
5. Customize the linear-gradient values and the border-radius value according to your needs.
6. Click the green check mark.
7. Click Save to apply all your changes.

TABLE OF CONTENTS

• Quick Walkthrough
• Prerequisites
•  Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Copy the Code
  • Step 3: Edit the Button Design Element
  • Step 4: Paste the Code
  • Step 5: Save
• Gradient Styles 
  • Basic Linear Gradient
  • Horizontal Gradient
  • Radial Gradient
  • Conic Gradient

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have the Button Design Element on your SharePoint page and it must have the Primary color of your SharePoint Theme as its background color.

 Interactive Tutorial

Before starting the interactive tutorial, copy the CSS of the Gradient Style you'd like to use. You can see them in the Gradient Style section.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to add gradient effect to the Button Design Element:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit:

• Close the Toolbox:

• Select the ShortPoint tag.
• Click the Edit Properties icon:

Step 2: Copy the Code

• Copy the CSS of the gradient style you'd like to use in the Gradient Style section.

NOTEBefore proceeding, make sure you already have the Button Design Element on your SharePoint page. To learn how to add it, check out How to Customize the Button Design Element. You must also set the background color of the button to Primary to ensure that the text inside can be vividly seen once you add the gradient effect: 

• Click the Button tag:

• Select the cogwheel icon:

Step 4: Paste the Code

• Click the next icon:

• Go to the Custom CSS tab.
• Paste the code.
• Customize the code according to your preferences:

Step 5: Save

• Once satisfied with your edits, click the green check mark.
• Click the eye icon to see your page in real-time:

• Click Save to apply all your changes:

Well done! You can now add gradient colors to your Buttons.

Gradient Styles 

We've compiled some gradient styles you can use below. Copy the style that best suits your needs:

DESIGN TIPYou can use a color picker to get the HEX of the color you want to use.

Basic Linear Gradient

background: linear-gradient(#5A37A5, #0055ff); 
border-radius: 10px !important;

background: linear-gradient(to right, #5A37A5, #0055ff); 
border-radius: 10px !important;

background: radial-gradient(circle, #020024 0%, #5A37A5 35%, #0055ff 100%);
border-radius: 10px !important;

background: conic-gradient(#5A37A5, #0055ff);
border-radius: 10px !important;

Related articles:

• How to Make Rounded Corners for ShortPoint Button
• How to Change the Title/Subtitle Font Size of the Button Design Element
• How to Make a Transparent Button (Animated on Mouse Hover)
• How to Customize the Location of the Button Icon