The menu

Flatten the tiles in the sheet

Each tile in the share sheet carries its brand colour as an inline style, and nothing but !important beats an inline style. That single word is the whole difference between this page and squaring the sheet’s corners, where no rule of yours needs it.

The code

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

Why this one needs !important and the corners do not

Our stylesheet is appended to the head at runtime, so it is the last author sheet on the page and at equal specificity we win — which is backwards from what an embedder needs. The corner settings work around that by never declaring a default at all, only reading one from a variable, so your rule is the only declaration there is. A colour cannot do that: it is written onto the element itself, where no selector reaches it.

The glyph colour is inline too

Three services have a light tile and therefore dark ink — Snapchat, Qzone and Nextdoor — because a white mark on Snapchat’s yellow is invisible. Flatten every tile to a dark ground and those three marks go with it. Take the ink over in the same rule and the sheet stays readable.

.ats_menu .ats_btn {
  background-color: #111827 !important;
  color: #ffffff !important;
}

One tile, and the class not to use

Add the service key to reach a single row. Do not reach for .ats_icon: the tile carries it, and so does the wrapper around the glyph inside the tile, so a rule on that class paints a second box within the first. .ats_btn is on the tile alone.

.ats_menu .ats_btn_facebook {
  background-color: #111827 !important;
}

Live demo

Demo ↗

An article worth passing on

Press More: every tile in the sheet is the same ink. The row above it is untouched, because the rule names the panel rather than the buttons.

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<style>
.ats_menu .ats_btn {
  background-color: #111827 !important;
}
</style>

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

<script async src="//static.addtosite.com/widget.js"></script>

Your own colours