Creative Custom CSS for the Button Design Element

By default, the Button Design Element already has amazing features that you can use to elevate how it looks on your page:

NOTETo see all the features you can use for the Button Design Element, check out How to Customize the Button Design Element.

But with Custom CSS, you can take it a step further and create other amazing customizations including gradient colors, bigger font sizes, and many more.

TABLE OF CONTENTS

• Creative Custom CSS for Buttons
  • Create Rounded Button Corners
  • Modify the Title/Subtitle Font Size
  • Make Transparent Buttons
  • Add Gradient Effect
  • Customize the Button Icon Location
  • Combination of Styles

Creative Custom CSS for Buttons

To help you get started, we’ve compiled useful Custom CSS tutorials you can implement on the Button Design Element. Check them out below.

Create Rounded Button Corners

By default, button corners are square. This tutorial will teach you how to make rounded Button corners using Custom CSS.

BEFORE	AFTER

Visit How to Make Rounded Corners for ShortPoint Button for a comprehensive guide on how to implement this effect.

Modify the Title/Subtitle Font Size

By default, you can only change the size of the Button, not the size of the actual text inside it. This tutorial will demonstrate how to resize the text inside the Button Design Element.

BEFORE	AFTER

Go to How to Change the Title/Subtitle Font Size of the Button Design Element to learn how to accomplish this.

Make Transparent Buttons

By default, you can only select solid colors as the background color of Buttons. This tutorial will show you how to make transparent buttons that will animate and become a solid button when the mouse hovers over it.

BEFORE	AFTER

See how you can do this in How to Make a Transparent Button (Animated on Mouse Hover).

Add Gradient Effect

By default, you don’t have the option to add a gradient effect to the Button Design Element. This support article will highlight how to add gradient colors to the Buttons.

BEFORE	AFTER

Check out How to Add Gradient Effect to the Button Design Element to learn how to do this on your SharePoint pages.

Customize the Button Icon Location

By default, you don’t have the option to change the location of the icons in the Button Design Element. This tutorial showcases how you can change its position using Custom CSS.

BEFORE	AFTER

Follow our step-by-step guide on How to Customize the Location of the Button Icon to see how to do it.

Combination of Styles

You can combine all these amazing CSS styles to create a unique button design. For example, in the image below, we've added a gradient effect, created rounded corners, and modified the font size of the title:

Enjoy trying out these creative Custom CSS techniques on your own SharePoint pages. If you'd like to explore more ways to enhance the Button Design Element or any other Design Element using Custom CSS, you can visit our Knowledge Base.