The buttons

Button labels

Any button can carry a word. Give it the text you want and the button grows to hold it; leave the attribute off and it stays a square icon.

The code

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook" data-label="Share"></a>
  <a class="ats_btn_x" data-label="Post"></a>
  <a class="ats_btn_email" data-label="Email"></a>
  <a class="ats_dd"></a>
</div>

What to watch for

Labels make each button much wider. Set a smaller size, or cap the row and let the rest fall into the menu.

Labels are per button

There is no option that labels everything. That is deliberate: a row where every button carries its own name is wider than most columns and reads as a list, not a row of buttons.

Live demo

Demo ↗

An article worth passing on

Three labelled buttons and one that is not, so you can see how they sit together.

Services (3 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook" data-label="Share"></a>
  <a class="ats_btn_x" data-label="Post"></a>
  <a class="ats_btn_email" data-label="Email"></a>
  <a class="ats_dd"></a>
</div>

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