Adding custom css to addthis buttons?

Question

I have used an addthis buttons in various parts of my website and I want to add custom CSS to them. How can I do that?

<a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-email" style="border-radius: 2px; background-color: rgb(132, 132, 132);">
  <span class="at4-visually-hidden">Share to Email</span>
  <span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="at-icon at-icon-email" style="fill: rgb(255, 255, 255); width: 32px; height: 32px;">
      <g>
        <g fill-rule="evenodd"></g>
        <path d="M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z"></path>
        <path d="M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z"></path>
      </g>
    </svg>
  </span>
</a>

This is how a single button appears in the console but I cannot simply take the class name from here and add CSS to it as it will affect other buttons also as they might have the same class name.

And being specific selects other items? a.at-icon-wrapper.at-share-btn.at-svc-email — Tom, Sep 30 '16 at 11:25
suppose i have three elements with this class a.at-icon-wrapper.at-share-btn.at-svc-email and I want to change only one button background. — abhit, Sep 30 '16 at 11:28
You can give them more than one class (space separated), to make them easier to tell apart. — Andrew Bone, Sep 30 '16 at 11:30
these elements are auto generated.How can I add classes to these elements — abhit, Sep 30 '16 at 11:32
parent div class to handle or use nth-child property to hanle — Dhaarani, Sep 30 '16 at 11:34
The tag has the class at-svc-email so I think it's fair to say each button type has a class for what it is? Like at-svc-facebook or whatever? If you're only planning on having one of each button type use that? — Andrew Bone, Sep 30 '16 at 11:37
Do you know where in the DOM they will appear? Can you add a parent div? — Tom, Sep 30 '16 at 11:42

Dhaarani · Answer 1 · 2016-09-30T11:54:21.847

/* Styles to simulate addthis formatting */
.atss .at-share-btn{border:0;padding:0}.atss .at-share-btn,.atss a{position:relative;display:block;width:3pc;margin:0;outline-offset:-1px;text-align:center;float:left;-webkit-transition:width .15s ease-in-out;transition:width .15s ease-in-out;overflow:hidden;background:#e8e8e8;z-index:100030;cursor:pointer}.at4-visually-hidden{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;overflow:hidden}.atss .at-share-btn span .at-icon,.atss a span .at-icon{position:relative;top:0;left:0;display:block;background-repeat:no-repeat;background-position:50% 50%;width:2pc;height:2pc;line-height:2pc;border:none;padding:0;margin:0 auto;overflow:hidden;cursor:pointer;cursor:hand}.atss .at-share-btn .at-icon-wrapper,.atss a .at-icon-wrapper{display:block;padding:8px 0}a .at-icon-wrapper{cursor:pointer}.at-icon-wrapper{display:inline-block;overflow:hidden}

/* overwrite code */
.at-svc-email .at-icon-wrapper {
  background: green;
}
.at-svc-email .at-icon-wrapper svg {
  fill: tomato!important;
}

<a role="button" tabindex="1" class="at-icon-wrapper at-share-btn at-svc-email" style="border-radius: 2px; background-color: rgb(132, 132, 132);">
  <span class="at4-visually-hidden">Share to Email</span>
  <span class="at-icon-wrapper" style="line-height: 32px; height: 32px; width: 32px;">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="at-icon at-icon-email" style="fill: rgb(255, 255, 255); width: 32px; height: 32px;">
      <g>
        <g fill-rule="evenodd"></g>
        <path d="M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z"></path>
        <path d="M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z"></path>
      </g>
    </svg>
  </span>
</a>

but this will change the background of every button having this class. — abhit, Sep 30 '16 at 11:23
@lakshay [This](http://stackoverflow.com/a/11918501/6501094) will change the css when an element has **multiple** classes. [Example](https://jsfiddle.net/tybro0103/covbtpaq/) — Roy123, Sep 30 '16 at 11:30

Adding custom css to addthis buttons?

1 Answers1