AddToSite

← Customize

Customize

Your own colours

Brand colours are applied as inline styles, so overriding one takes a slightly more specific selector and an !important. Everything else about the button stays as it was.

Live demo

Running on this page

The same kit with every tile forced to one ink colour.

The code

This is the demo above, verbatim. Nothing is shortened for the page.

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

<div class="ats_kit ats_kit_size_32">
  <a class="ats_button_facebook"></a>
  <a class="ats_button_x"></a>
  <a class="ats_button_linkedin"></a>
  <a class="ats_button_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

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

One service at a time

Target the service class instead of .ats_button.

.ats_kit .ats_button_facebook {
  background-color: #111827 !important;
}

Watch the contrast

The glyph on a tile is white unless the tile is light, and the widget picks that automatically from the brand colour. Override the colour and you own that decision: keep the glyph above 3:1 against whatever you choose, or the mark turns into a smudge.

Next