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 ?

Subminiaturize

Did you check this link developers.google.com/classroom/guides/sharebutton which has sample on customizing classroom share button. – Brush

yeah, went through it, but all I could find is that it allows to change to 3 predefined colors and sizes. – Subminiaturize

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.)

Fixative

Google's blog post doesn't mention this, but https://foo.com/ should probably be encoded/escaped. – Bunch

Answer 2

To modify the button you can refer to the Share button documentation. However, there are some restrictions that you would need to follow to modify the Classroom button in the appropriate way.

Here you can find all the specifications and restrictions to the logo. Check if these specifications allow you to modify the logo accordingly to your needs.

Deprivation

have already gone through, but couldn't find any way to customize the way I want (please refer the snapshot in the question). All it allows is change to 3 predefined colors and sizes. Please see the updated question on what type of customization I need. – Subminiaturize

Answer 3

You can put the white logo (square or circle) on a colored background of your choice. Full brand guidelines here

Brush