How can we help you today?

How to Customize the Button Design Element

In this article, we will walk you through how to insert and customize the Button Design Element.


button design element



TABLE OF CONTENTS


Prerequisites


Interactive Tutorial

Start the interactive tutorial to learn the two ways you can insert the Button Design Element:



NOTECheck out Button Features to learn more about the Button Design Element’s customization options.

Step-by-step Tutorial

There are two ways to insert the Button Design Element. Follow the option that best suits your needs.


Option 1: Using the Library of Design Elements

ShortPoint has a library of Design Elements that ShortPoint Designers can add to their page. Follow along to learn how to insert the Button Design Element using this option:


Step 1: Edit the ShortPoint Web Part

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


Edit

  • Select the ShortPoint tag.
  • Select the pencil icon.

Step 2: Insert the Button Design Element

  • Click the plus icon to open the library of Design Elements:
  • Scroll down to look for Button or use the search bar.
  • Select Button.

Step 3: Customize the Content

  • Navigate to the Content tab.
  • Customize the content according to your needs.


NOTEGet more details about these features in the Button Features section.

Step 4: Customize the Design

  • Navigate to the Design tab.
  • Customize the design according to your preferences.
  • Once done, click the green check mark.


NOTECheck out Button Features to learn more about the Button Design Element’s customization options.

Step 5: Save

  • Click the eye icon to see your page in real-time.


eye icon


  • Click Save to apply all your changes.


Save


Option 2: Using the Rich Text Editor

Button is an Inline Design Element. This means that you can also insert it into your SharePoint page using the Rich Text Editor. Follow the steps to learn how to access it:


Step 1: Edit the ShortPoint Web Part

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


Edit

  • Select the ShortPoint tag.
  • Select the pencil icon.

Step 2: Insert the Button Design Element


NOTEThe Rich Text Editor can be accessed in Design Elements with text editing features. This includes the Text Design Element and content-holder Design Elements like Alert, Tab, Panel, etc.


  • Hover over the Text, double-click, and highlight the text you want to turn into a button.
  • Click the ShortPoint icon.


ShortPoint icon


  • Select the Show button icon.


Show button icon


Step 3: Customize the Button

  • Modify the content and the look of the Button according to your needs.
  • Then, click Apply.


NOTECheck out Button Features to learn more about the OOTB options you can customize.

Step 4: Save

  • Click the eye icon to see your page in real-time.


eye icon


  • Click Save to apply all your changes.


Save


Button Features

Below are the options you can find in the Button Settings window and the Rich Text Editor:


Button Settings Window

These are the options you will find if you used Option 1 to add the Button Design Element:


A. Content Tab

You can modify the content of the Button Design Element using this tab. Below are the features you can change:


content tab


TitleTitlemodifies the name of the button.

Subtitle

Subtitlemodifies the text that will appear below the main title.
LinkLinkspecifies the link address you want the button to redirect to.

Icon


Iconspecifies the icon beside the title. Check out the ShortPoint Icons page to see all available icons.

B. Design Tab

You can modify the default design of the element in the Design Tab. Below are the settings you can configure:

Design Tab


ColorColorallows you to choose the color of your button.
Text ColorText Colorallows you to choose the color of the text inside the button.
SizeSizemodifies the size of the button. You can choose one of the following sizes: xsmall, small, normal, or large.
WideWidethe button width will fit the whole area width.

Disabled
Disabledallows you to disable the button.
Linking OptionLinking Optionallows you to choose how to open your link including:
  • Default (will open the link on the same window), 
  • LightBox (will open the link on a lightbox), 
  • New Window (will open the link on a new window), and 
  • Dialog (will open the link on a dialog window).



C. Custom CSS Tab


This tab allows you to use your own CSS, HTML, and Javascript code to customize the Button Design Element. 


NOTE: Check out our support article on How to Insert Custom CSS into a Page Builder Elemet? (Basic Tutorial) to know more about Custom CSS. 


Custom CSS tab


NOTE: The Connect and Visibility tabas are currently not available in Live Mode.

Button Rich Text Editor Options

These are the options you will find if you used Option 2 to add the Button Design Element:


Button rich text editor options


TitleTitleallows you to modify the title of the Button.

Subtitle
Subtitleallows you to modify the description of the Button.
LinkLink allows you to add the link the Button will redirect to.
IconIconallows you to choose the icon that will appear next to the Button. You can go to our icons page to see the list of icons available for you to use.
ColorColor allows you to choose the color of your button. You can select a color by [1] typing the #HEX code, [2] using the drop-down, or [3] using the color picker.
Text ColorText Colorallows you to choose the color of the text inside the button. You can select a color by [1] typing the #HEX code, [2] using the drop-down, or [3] using the color picker.
SizeSizemodifies the size of the button. You can choose one of the following sizes: xsmall, small, normal, or large.

Wide

Wide 

the Button width will fit the whole area width.

Disabled
Disabledallows you to disable the button.
Linking Option
Linking Option

allows you to choose how to open your link:

  • Default (will open the link on the same window), 
  • LightBox (will open the link on a lightbox), 
  • New Window (will open the link on a new window), and 
  • Dialog (will open the link on a dialog window).


Now you know how to customize the Button Design Element! Start making the most out of this feature on your SharePoint pages. 


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