Button and Call To Action web parts on SharePoint Online pages

Have you ever needed a quick button on a web page? Or perhaps a way to get people to notice and do something? You can now use the Button and the Call To Action web parts on Modern SharePoint Online web parts. Here’s how…

In a new section on your page, click the Web Part icon, and you’ll see the Button and the Call To Action web parts:

Machine generated alternative text:
Save as draft 
Page details 
Embed 
Conversations 
V Your page has been saved 
Highlighted 
content 
Countdown 
Publish 
Call To Action and Button web parts 
Duff, Thomas 
UNIFIED COMM ADMIN IV 
b 
earch 
Link 
All A to Z 
Bing Maps 
Code Snippet

Here I’ve clicked the Button web part and I have the web part on my page along with the configuration to enter the button label and where it goes when clicked:

Machine generated alternative text:
x 
SharePoint Migration 
Home Migration Schedule and List 
Edit 
Save as draft 
Page details 
V 
p Search this site 
Your page has been saved 
Not following 
Publish 
Button 
Label 
ype label here 
Link 
https:// 
Button alignment 
Button color is based on the site theme accent 
color. Learn more 
Call To Action and Button web parts 
Duff, Thomas 
UNIFIED COMM ADMIN IV 
Button

I’ve filled out the button with Time To Search! as the label and the Bing search engine as the location to go to when clicked:

Machine generated alternative text:
x 
SharePoint Migration 
Home Migration Schedule and List 
Edit 
Save as draft 
Page details 
V 
p Search this site 
Your page has been saved 
Not following 
Publish 
Button 
Label 
Time To Search! 
Link 
https://bing.com 
Button alignment 
Button color is based on the site theme accent 
color. Learn more 
Call To Action and Button web parts 
Duff, Thomas 
UNIFIED COMM ADMIN IV 
Time To Search!

And here is what the page looks like with the button. Keep in mind that the button color is always going to be based on the site theme accent color:

Machine generated alternative text:
E Send by email Promote Page details 
Call To Action and Button web parts 
Duff, Thomas 
UNIFIED COMM ADMIN IV 
Time To Search! 
You may also be interested in 
Published 11/4/2019 
Edit

In this example, I’ve clicked the Call To Action web part button and added it to my page:

Machine generated alternative text:
Save as draft 
Discard changes 
Page details 
V Your page has been saved 
Republish 
Call To Action and Button web parts 
Duff, Thomas 
UNIFIED COMM ADMIN IV 
Add your call to action text here 
Button

In the Call To Action web part, you can place the Call To Action text, Button label text, the link to go to when the button is clicked, a background picture, and the ability to change the focal point of the picture:

Machine generated alternative text:
x 
SharePoint Migration 
Home Migration Schedule and List 
Edit 
Save as draft 
Discard changes Page details 
V 
p Search this site 
Your page has been saved 
Not following 
Republish 
Call to action 
Background O 
Change 
Button label 
Type label here 
Button link 
https:// 
Alignment 
Call To Action and Button web parts 
Duff, Thomas 
UNIFIED COMM ADMIN IV 
Drag to set a focal point.

Here I’ve added a picture, placed a Call To Action to take a cruise on the Nile, and a button to send you to the cruise site to book it:

Machine generated alternative text:
x 
SharePoint Migration 
Home Migration Schedule and List 
Edit 
Save as draft 
Discard changes Page details 
V 
p Search this site 
Your page has been saved 
Not following 
Republish 
Call to action 
Background O 
Change 
Button label 
Book your cruise here! 
Button link 
https://www.vikingcruises.com 
Alignment 
Call To Action and Button web parts 
Duff, Thomas 
UNIFIED COMM ADMIN IV 
Embrace adventure with a cruise down the Nile 
Book your cruise here!

And here’s how it looks on the page when you’re finished:

Machine generated alternative text:
SharePoint Migration 
Home Migration Schedule and List Migration Calendar 
E Send by email Promote Page details 
Call To Action and Button web parts 
Duff, Thomas 
UNIFIED COMM ADMIN IV 
Embrace adventure with a cruise down the Nile 
Book your cruise here! 
Not following 
Migration List 
Schedule by Batch 
SparkOne 
Search this site 
Published 11/4/2019 
Edit

1 Comment

  1. Can you add alt text to the background image on the call to action webpart? Or at least mark it as decorative if not?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s