How to customize the look & feel of the google classroom share button

Question

Currently, it appears like a square with no text beside, we want to customize the look & feel without disturbing the icon of course to match our other buttons.

Already tried adding styles to the div which is converted to the share icon, but unsuccessful so far.

<div id='widget-div' class='btn btn-blue'>Google Classroom</div>

The above line renders as below :

Any idea how to proceed further or which direction to look into ?

Answer 1

To get a completely different share button you will need to write your own JS to style the button correctly, handle the mouse click, etc., and then direct the user to a URL of the form https://classroom.google.com/share?url=https://foo.com/ (source). (You'll need to following the branding guidelines too.)