CODEWITHSUNDEEP
cssaddthis
abhit
abhit

Reputation: 981

Adding custom css to addthis buttons?

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.

Upvotes: 0

Views: 1813

Answers (1)

Dhaarani
Dhaarani

Reputation: 1360

/* 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>

Upvotes: 1

Related Questions