The buttons

Your own artwork on a button

Give a button a background image and it becomes the face of that button. The widget draws the same image a second time as a layer above the glyph, so your artwork replaces our mark instead of sitting behind it. One line of CSS, per service, and no attribute and no JavaScript.

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>

Turn the built-in glyph off

Artwork with any transparency lets our mark show through from underneath, because the glyph is still there. --ats-glyph: none drops it, in the same rule — and a typo in the value leaves the glyph visible rather than making it vanish, which is the right way round for a mistake on someone else’s page. The tile’s ground is a separate matter: that is an inline colour, so changing it takes !important.

.ats_btn_facebook {
  background-image: url(/img/my-fb.svg);
  --ats-glyph: none;
}

Crop instead of letterbox

A button is a fixed square and the artwork is fitted inside it, so a wide image arrives with air above and below. Ask for cover and it fills the square and loses its edges instead. It is a variable rather than a plain background-size because a plain one would not work: our sheet loads last, so at equal specificity it would beat yours. We never declare this property, so yours is the only one.

.ats_btn_facebook {
  background-image: url(/img/my-fb.png);
  --ats-glyph: none;
  --ats-art-fit: cover;
}

For a background meant to stay behind

A gradient or a texture is not a face — it belongs under the mark, not over it. --ats-art: none switches the lifted layer off and leaves the background where CSS normally puts it. A labelled pill already behaves this way without being told: there the image is a backdrop behind a word, and covering the word would be a bug.

.ats_btn_facebook {
  background-image: linear-gradient(140deg, #1D4ED8, #7C3AED);
  --ats-art: none;
}

It reaches the share sheet too

A tile in the sheet carries .ats_btn and the service’s own class as well, and it paints its colour with background-color rather than the shorthand, which leaves the image slot free. So the same unscoped rule dresses the Facebook row inside the sheet as well as the button in your page. Scope it to .ats_kit when you want only the row.

.ats_kit .ats_btn_facebook {
  background-image: url(/img/my-fb.svg);
  --ats-glyph: none;
}

Live demo

Demo ↗

An article worth passing on

The first tile’s face is an image — this site’s own favicon, standing in for your artwork. The other three are untouched, and the brand colour is still the ground behind it.

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<style>
.ats_btn_facebook {
  background-image: url(https://addtosite.com/i/favicon.svg);
  --ats-glyph: none;
}
</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>

Menu icon colour