The buttons

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.

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>

What to watch for

Our rules are a single class deep, so yours win without !important as long as they load after the widget.

One service at a time

Target the service class instead of .ats_btn.

.ats_kit .ats_btn_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.

Live demo

Demo ↗

An article worth passing on

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

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<style>
.ats_kit .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>