How to hide approve reject workflow approval button from ribbon in SharePoint online using css?

This SharePoint Online tutorial explains, how we can hide Approve/Reject workflow ribbon button in SharePoint online using CSS.

Recently we were developing few workflows using visual studio 2015 as a SharePoint hosted add-in using SharePoint online.

If you are new to SharePoint workflow development, then check out the below SharePoint workflow tutorials:

Hide approve reject workflow approval button from the ribbon in SharePoint online using CSS

For those custom development, we have custom Approve and Reject button and we have added some approval logic inside it. We do not want business users to click on the Approve/Reject button which presented inside the ribbon.

This ribbon button is presented inside lists, document libraries, task forms ribbons. And based on the window size, the button also changed.

hide approve reject workflow approval button from ribbon sharepoint
hide approve reject workflow approval button from ribbon

We can hide the ribbon button using CSS, for this we need an id and we can retrieve using any developer tool.

Below are few button ids like below for different list, libraries or task forms.

Ribbon.Tasks.Workflow.Moderate-Large
Ribbon.ListItem.Workflow.Moderate-Small
Ribbon.ListItem.Workflow.Moderate-Large
Ribbon.ListItem.Workflow.Moderate-Medium
Ribbon.Documents.Workflow.Moderate-Small
Ribbon.Documents.Workflow.Moderate-Large
Ribbon.Documents.Workflow.Moderate-Medium
Ribbon.ListForm.Display.Manage.ApproveReject-Small
Ribbon.ListForm.Display.Manage.ApproveReject-Medium
Ribbon.ListForm.Display.Manage.ApproveReject-Large

Now to hide the buttons, we have to write css file. We can edit the page and add a script editor web part or a content editor web part and you can write the below code.

<style type="text/css">
a[id="Ribbon.Tasks.Workflow.Moderate-Large"]
{
display:none;
}
</style>

Based on the list or library, you can change the above id.

Also, you can add the CSS in a different file and refer it inside the master page.

After this, the ribbon button will be hidden.

Read some SharePoint AngularJs tutorials:

I hope this will be helpful to hide approve reject workflow approval button from the ribbon in SharePoint online using CSS.

>