如何自定义谷歌课堂分享按钮的外观答案

【问题标题】：How to customize the look & feel of the google classroom share button如何自定义谷歌课堂分享按钮的外观
【发布时间】：2015-11-07 17:18:49
【问题描述】：

目前，它看起来像一个正方形，旁边没有文字，我们希望自定义外观而不干扰图标以匹配我们的其他按钮。

已经尝试为div添加样式，转换为分享图标，但目前未成功。

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

上面的行呈现如下：

知道如何进一步或研究哪个方向吗？

【问题讨论】：

【解决方案1】：

要修改按钮，您可以参考Share button 文档。但是，您需要遵循一些限制才能以适当的方式修改“课堂”按钮。

Here您可以找到徽标的所有规范和限制。检查这些规范是否允许您根据需要修改徽标。

【讨论】：

已经通过了，但是找不到任何方法来自定义我想要的方式（请参考问题中的快照）。它所允许的只是更改为 3 种预定义的颜色和尺寸。请参阅更新后的问题，了解我需要哪种类型的自定义。

【解决方案2】：

您可以将白色徽标（方形或圆形）放在您选择的彩色背景上。完整的品牌指南here

【讨论】：

【解决方案3】：

要获得完全不同的分享按钮，您需要编写自己的 JS 来正确设置按钮样式、处理鼠标点击等，然后将用户引导至https://classroom.google.com/share?url=https://foo.com/ (source) 形式的 URL ）。（你也需要关注branding guidelines。）

【讨论】：