Hiding a SharePoint 2010/2013 Disabled Ribbon Buttons By User Permissions Using CSS

Many SharePoint users asking “Can we hide Ribbon buttons for current login user (by his permissions) rather than show it as disabled button !?

The answer is YES. When user did not have contribute permissions (like Add Item, Edit Item …etc.), these buttons will be shown in the Ribbon, but not active (Disabled), so the Ribbon button will not be clickable as following:

In SharePoint 2010

In SharePoint 2013 / Online

So, to hide these buttons in easy and simple way, we will use an existing CSS class in SharePoint 2010, 2013, and Online version. The CSS class name is “.ms-cui-disabled”, and this CSS class is added to all disabled buttons in the Ribbon?!? So the idea is to override the behavior of this CSS class in Master Page and hide any button that use this CSS class.