このボタンを追加するカスタムCSSを追加しますか？

Question

私はウェブサイトのさまざまな部分でaddthisのボタンを使いました。カスタムCSSを追加したいのです。どうやってやるの？

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

これは、単一のボタンがコンソールに表示されますが、私は単にここからクラス名を取り、彼らが持っている可能性があるとして、それはまた、他のボタンに影響を与えるとして、それにCSSを追加することはできませんどのように同じクラス名。

Answer 1

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