Advertisement
PalmaSolutions

Social Share CSS

Jun 9th, 2018
368
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.57 KB | None | 0 0
  1. .resp-sharing-button__link,
  2. .resp-sharing-button__icon {
  3.   display: inline-block
  4. }
  5.  
  6. .resp-sharing-button__link {
  7.   text-decoration: none;
  8.   color: #fff;
  9.   margin: 0.5em
  10. }
  11.  
  12. .resp-sharing-button {
  13.   border-radius: 5px;
  14.   transition: 25ms ease-out;
  15.   padding: 0.5em 0.75em;
  16.   font-family: Helvetica Neue,Helvetica,Arial,sans-serif
  17. }
  18.  
  19. .resp-sharing-button__icon svg {
  20.   width: 1em;
  21.   height: 1em;
  22.   margin-right: 0.4em;
  23.   vertical-align: top
  24. }
  25.  
  26. .resp-sharing-button--small svg {
  27.   margin: 0;
  28.   vertical-align: middle
  29. }
  30.  
  31. /* Non solid icons get a stroke */
  32. .resp-sharing-button__icon {
  33.   stroke: #fff;
  34.   fill: none
  35. }
  36.  
  37. /* Solid icons get a fill */
  38. .resp-sharing-button__icon--solid,
  39. .resp-sharing-button__icon--solidcircle {
  40.   fill: #fff;
  41.   stroke: none
  42. }
  43.  
  44. .resp-sharing-button--twitter {
  45.   background-color: #55acee
  46. }
  47.  
  48. .resp-sharing-button--twitter:hover {
  49.   background-color: #2795e9
  50. }
  51.  
  52. .resp-sharing-button--pinterest {
  53.   background-color: #bd081c
  54. }
  55.  
  56. .resp-sharing-button--pinterest:hover {
  57.   background-color: #8c0615
  58. }
  59.  
  60. .resp-sharing-button--facebook {
  61.   background-color: #3b5998
  62. }
  63.  
  64. .resp-sharing-button--facebook:hover {
  65.   background-color: #2d4373
  66. }
  67.  
  68. .resp-sharing-button--tumblr {
  69.   background-color: #35465C
  70. }
  71.  
  72. .resp-sharing-button--tumblr:hover {
  73.   background-color: #222d3c
  74. }
  75.  
  76. .resp-sharing-button--reddit {
  77.   background-color: #5f99cf
  78. }
  79.  
  80. .resp-sharing-button--reddit:hover {
  81.   background-color: #3a80c1
  82. }
  83.  
  84. .resp-sharing-button--google {
  85.   background-color: #dd4b39
  86. }
  87.  
  88. .resp-sharing-button--google:hover {
  89.   background-color: #c23321
  90. }
  91.  
  92. .resp-sharing-button--linkedin {
  93.   background-color: #0077b5
  94. }
  95.  
  96. .resp-sharing-button--linkedin:hover {
  97.   background-color: #046293
  98. }
  99.  
  100. .resp-sharing-button--email {
  101.   background-color: #777
  102. }
  103.  
  104. .resp-sharing-button--email:hover {
  105.   background-color: #5e5e5e
  106. }
  107.  
  108. .resp-sharing-button--xing {
  109.   background-color: #1a7576
  110. }
  111.  
  112. .resp-sharing-button--xing:hover {
  113.   background-color: #114c4c
  114. }
  115.  
  116. .resp-sharing-button--whatsapp {
  117.   background-color: #25D366
  118. }
  119.  
  120. .resp-sharing-button--whatsapp:hover {
  121.   background-color: #1da851
  122. }
  123.  
  124. .resp-sharing-button--hackernews {
  125. background-color: #FF6600
  126. }
  127. .resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {   background-color: #FB6200 }
  128.  
  129. .resp-sharing-button--vk {
  130.   background-color: #507299
  131. }
  132.  
  133. .resp-sharing-button--vk:hover {
  134.   background-color: #43648c
  135. }
  136.  
  137. .resp-sharing-button--facebook {
  138.   background-color: #3b5998;
  139.   border-color: #3b5998;
  140. }
  141.  
  142. .resp-sharing-button--facebook:hover,
  143. .resp-sharing-button--facebook:active {
  144.   background-color: #2d4373;
  145.   border-color: #2d4373;
  146. }
  147.  
  148. .resp-sharing-button--twitter {
  149.   background-color: #55acee;
  150.   border-color: #55acee;
  151. }
  152.  
  153. .resp-sharing-button--twitter:hover,
  154. .resp-sharing-button--twitter:active {
  155.   background-color: #2795e9;
  156.   border-color: #2795e9;
  157. }
  158.  
  159. .resp-sharing-button--email {
  160.   background-color: #777777;
  161.   border-color: #777777;
  162. }
  163.  
  164. .resp-sharing-button--email:hover,
  165. .resp-sharing-button--email:active {
  166.   background-color: #5e5e5e;
  167.   border-color: #5e5e5e;
  168. }
  169.  
  170. .resp-sharing-button--reddit {
  171.   background-color: #5f99cf;
  172.   border-color: #5f99cf;
  173. }
  174.  
  175. .resp-sharing-button--reddit:hover,
  176. .resp-sharing-button--reddit:active {
  177.   background-color: #3a80c1;
  178.   border-color: #3a80c1;
  179. }
  180.  
  181. .resp-sharing-button--whatsapp {
  182.   background-color: #25D366;
  183.   border-color: #25D366;
  184. }
  185.  
  186. .resp-sharing-button--whatsapp:hover,
  187. .resp-sharing-button--whatsapp:active {
  188.   background-color: #1DA851;
  189.   border-color: #1DA851;
  190. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement