diff --git a/src/components/BloggerButton.vue b/src/components/BloggerButton.vue
index 1e9d87e..205b499 100644
--- a/src/components/BloggerButton.vue
+++ b/src/components/BloggerButton.vue
@@ -64,12 +64,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(14, 100%, 57%, 1);
-$focus-color: hsla(14, 94%, 82%, 0.4);
-$hover-color: hsla(14, 100%, 57%, 0.9);
-$painted-color: hsla(14, 77%, 47%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -81,10 +76,8 @@ $painted-color: hsla(14, 77%, 47%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #ff5724;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -97,234 +90,193 @@ $painted-color: hsla(14, 77%, 47%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(252, 186, 166, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(255, 87, 36, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #ff5724;
+}
+.share-button--outline .share-button__text {
+  color: #ff5724;
+}
+.share-button--outline .share-button__icon path {
+  fill: #ff5724;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(255, 87, 36, 0.9);
+  border-color: rgba(255, 87, 36, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(255, 87, 36, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #ff5724;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(255, 87, 36, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #d4471c;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #ff5724;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #d4471c;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #ff5724;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/DiggButton.vue b/src/components/DiggButton.vue
index 1cf644b..9f4617b 100644
--- a/src/components/DiggButton.vue
+++ b/src/components/DiggButton.vue
@@ -50,12 +50,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(0, 0%, 0%, 1);
-$focus-color: hsla(0, 0%, 25%, 0.4);
-$hover-color: hsla(0, 0%, 0%, 0.9);
-$painted-color: hsla(0, 0%, 0%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -67,10 +62,8 @@ $painted-color: hsla(0, 0%, 0%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: black;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -83,234 +76,193 @@ $painted-color: hsla(0, 0%, 0%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(64, 64, 64, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(0, 0, 0, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: black;
+}
+.share-button--outline .share-button__text {
+  color: black;
+}
+.share-button--outline .share-button__icon path {
+  fill: black;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(0, 0, 0, 0.9);
+  border-color: rgba(0, 0, 0, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(0, 0, 0, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: black;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(0, 0, 0, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: black;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: black;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: black;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: black;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/EmailButton.vue b/src/components/EmailButton.vue
index f025a4c..3f5b36d 100644
--- a/src/components/EmailButton.vue
+++ b/src/components/EmailButton.vue
@@ -50,12 +50,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(194, 77%, 56%, 1);
-$focus-color: hsla(194, 77%, 81%, 0.4);
-$hover-color: hsla(194, 77%, 56%, 0.9);
-$painted-color: hsla(193, 54%, 46%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -67,10 +62,8 @@ $painted-color: hsla(193, 54%, 46%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #38bde5;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -83,234 +76,193 @@ $painted-color: hsla(193, 54%, 46%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(169, 226, 244, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(56, 189, 229, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #38bde5;
+}
+.share-button--outline .share-button__text {
+  color: #38bde5;
+}
+.share-button--outline .share-button__icon path {
+  fill: #38bde5;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(56, 189, 229, 0.9);
+  border-color: rgba(56, 189, 229, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(56, 189, 229, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #38bde5;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(56, 189, 229, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #3699b5;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #38bde5;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #3699b5;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #38bde5;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/EvernoteButton.vue b/src/components/EvernoteButton.vue
index a1e7af1..f2e1606 100644
--- a/src/components/EvernoteButton.vue
+++ b/src/components/EvernoteButton.vue
@@ -60,12 +60,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(136, 100%, 33%, 1);
-$focus-color: hsla(136, 94%, 58%, 0.4);
-$hover-color: hsla(136, 100%, 33%, 0.9);
-$painted-color: hsla(135, 77%, 23%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -77,10 +72,8 @@ $painted-color: hsla(135, 77%, 23%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #00a82d;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -93,234 +86,193 @@ $painted-color: hsla(135, 77%, 23%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(47, 249, 101, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(0, 168, 45, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #00a82d;
+}
+.share-button--outline .share-button__text {
+  color: #00a82d;
+}
+.share-button--outline .share-button__icon path {
+  fill: #00a82d;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(0, 168, 45, 0.9);
+  border-color: rgba(0, 168, 45, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(0, 168, 45, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #00a82d;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(0, 168, 45, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #0d6824;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #00a82d;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #0d6824;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #00a82d;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/FacebookButton.vue b/src/components/FacebookButton.vue
index bb6b6b1..4589cdf 100644
--- a/src/components/FacebookButton.vue
+++ b/src/components/FacebookButton.vue
@@ -103,12 +103,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(221, 44%, 41%, 1);
-$focus-color: hsla(221, 38%, 66%, 0.4);
-$hover-color: hsla(221, 44%, 41%, 0.9);
-$painted-color: hsla(220, 21%, 31%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -120,10 +115,8 @@ $painted-color: hsla(220, 21%, 31%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #3b5897;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -136,234 +129,193 @@ $painted-color: hsla(220, 21%, 31%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(135, 156, 201, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(59, 88, 151, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #3b5897;
+}
+.share-button--outline .share-button__text {
+  color: #3b5897;
+}
+.share-button--outline .share-button__icon path {
+  fill: #3b5897;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(59, 88, 151, 0.9);
+  border-color: rgba(59, 88, 151, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(59, 88, 151, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #3b5897;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(59, 88, 151, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #3e4a60;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #3b5897;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #3e4a60;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #3b5897;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/FacebookMessengerButton.vue b/src/components/FacebookMessengerButton.vue
index d5ea924..33918a1 100644
--- a/src/components/FacebookMessengerButton.vue
+++ b/src/components/FacebookMessengerButton.vue
@@ -42,12 +42,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsl(208, 82%, 48%);
-$focus-color: hsla(208, 82%, 48%, 0.4);
-$hover-color: hsla(208, 82%, 48%, 0.7);
-$painted-color: hsla(208, 82%, 48%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -59,10 +54,8 @@ $painted-color: hsla(208, 82%, 48%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #1681df;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -75,234 +68,193 @@ $painted-color: hsla(208, 82%, 48%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(22, 129, 223, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(22, 129, 223, 0.7);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #1681df;
+}
+.share-button--outline .share-button__text {
+  color: #1681df;
+}
+.share-button--outline .share-button__icon path {
+  fill: #1681df;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(22, 129, 223, 0.7);
+  border-color: rgba(22, 129, 223, 0.7);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(22, 129, 223, 0.7);
+}
+.share-button--outline:hover .share-button__text {
+  color: #1681df;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(22, 129, 223, 0.7);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #1681df;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #1681df;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #1681df;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #1681df;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/HatenaButton.vue b/src/components/HatenaButton.vue
index cad6813..8363624 100644
--- a/src/components/HatenaButton.vue
+++ b/src/components/HatenaButton.vue
@@ -60,12 +60,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(196, 100%, 44%, 1);
-$focus-color: hsla(196, 94%, 69%, 0.4);
-$hover-color: hsla(196, 100%, 44%, 0.9);
-$painted-color: hsla(195, 77%, 34%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -77,10 +72,8 @@ $painted-color: hsla(195, 77%, 34%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #00a5e0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -93,234 +86,193 @@ $painted-color: hsla(195, 77%, 34%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(102, 211, 250, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(0, 165, 224, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #00a5e0;
+}
+.share-button--outline .share-button__text {
+  color: #00a5e0;
+}
+.share-button--outline .share-button__icon path {
+  fill: #00a5e0;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(0, 165, 224, 0.9);
+  border-color: rgba(0, 165, 224, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(0, 165, 224, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #00a5e0;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(0, 165, 224, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #147899;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #00a5e0;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #147899;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #00a5e0;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/InstapaperButton.vue b/src/components/InstapaperButton.vue
index 6578db5..f3773c2 100644
--- a/src/components/InstapaperButton.vue
+++ b/src/components/InstapaperButton.vue
@@ -60,12 +60,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(0, 0%, 12%, 1);
-$focus-color: hsla(0, 0%, 37%, 0.4);
-$hover-color: hsla(0, 0%, 12%, 0.9);
-$painted-color: hsla(0, 0%, 0%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -77,10 +72,8 @@ $painted-color: hsla(0, 0%, 0%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #1f1f1f;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -93,234 +86,193 @@ $painted-color: hsla(0, 0%, 0%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(94, 94, 94, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(31, 31, 31, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #1f1f1f;
+}
+.share-button--outline .share-button__text {
+  color: #1f1f1f;
+}
+.share-button--outline .share-button__icon path {
+  fill: #1f1f1f;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(31, 31, 31, 0.9);
+  border-color: rgba(31, 31, 31, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(31, 31, 31, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #1f1f1f;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(31, 31, 31, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: black;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #1f1f1f;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: black;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #1f1f1f;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/LinkedInButton.vue b/src/components/LinkedInButton.vue
index 7a83c53..bde6e29 100644
--- a/src/components/LinkedInButton.vue
+++ b/src/components/LinkedInButton.vue
@@ -103,12 +103,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(201, 100%, 35%, 1);
-$focus-color: hsla(201, 94%, 60%, 0.4);
-$hover-color: hsla(201, 100%, 35%, 0.9);
-$painted-color: hsla(200, 77%, 25%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -120,10 +115,8 @@ $painted-color: hsla(200, 77%, 25%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #0074b3;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -136,234 +129,193 @@ $painted-color: hsla(200, 77%, 25%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(57, 182, 249, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(0, 116, 179, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #0074b3;
+}
+.share-button--outline .share-button__text {
+  color: #0074b3;
+}
+.share-button--outline .share-button__icon path {
+  fill: #0074b3;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(0, 116, 179, 0.9);
+  border-color: rgba(0, 116, 179, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(0, 116, 179, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #0074b3;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(0, 116, 179, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #0f5071;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #0074b3;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #0f5071;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #0074b3;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/LiveJournalButton.vue b/src/components/LiveJournalButton.vue
index 6af754e..33aaeff 100644
--- a/src/components/LiveJournalButton.vue
+++ b/src/components/LiveJournalButton.vue
@@ -60,12 +60,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(195, 100%, 46%, 1);
-$focus-color: hsla(195, 94%, 71%, 0.4);
-$hover-color: hsla(195, 100%, 46%, 0.9);
-$painted-color: hsla(194, 77%, 36%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -77,10 +72,8 @@ $painted-color: hsla(194, 77%, 36%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #00b0eb;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -93,234 +86,193 @@ $painted-color: hsla(194, 77%, 36%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(112, 216, 251, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(0, 176, 235, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #00b0eb;
+}
+.share-button--outline .share-button__text {
+  color: #00b0eb;
+}
+.share-button--outline .share-button__icon path {
+  fill: #00b0eb;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(0, 176, 235, 0.9);
+  border-color: rgba(0, 176, 235, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(0, 176, 235, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #00b0eb;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(0, 176, 235, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #1581a2;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #00b0eb;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #1581a2;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #00b0eb;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/OdnoklassnikiButton.vue b/src/components/OdnoklassnikiButton.vue
index c21cb03..8252e24 100644
--- a/src/components/OdnoklassnikiButton.vue
+++ b/src/components/OdnoklassnikiButton.vue
@@ -104,12 +104,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(24, 91%, 53%, 1);
-$focus-color: hsla(24, 85%, 78%, 0.4);
-$hover-color: hsla(24, 91%, 53%, 0.9);
-$painted-color: hsla(23, 68%, 43%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -121,10 +116,8 @@ $painted-color: hsla(23, 68%, 43%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #f4711a;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -137,234 +130,193 @@ $painted-color: hsla(23, 68%, 43%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(247, 189, 151, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(244, 113, 26, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #f4711a;
+}
+.share-button--outline .share-button__text {
+  color: #f4711a;
+}
+.share-button--outline .share-button__icon path {
+  fill: #f4711a;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(244, 113, 26, 0.9);
+  border-color: rgba(244, 113, 26, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(244, 113, 26, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #f4711a;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(244, 113, 26, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #b85c23;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #f4711a;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #b85c23;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #f4711a;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/PinterestButton.vue b/src/components/PinterestButton.vue
index a6170c6..d953b76 100644
--- a/src/components/PinterestButton.vue
+++ b/src/components/PinterestButton.vue
@@ -108,12 +108,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(353, 92%, 39%, 1);
-$focus-color: hsla(353, 86%, 64%, 0.4);
-$hover-color: hsla(353, 92%, 39%, 0.9);
-$painted-color: hsla(352, 69%, 29%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -125,10 +120,8 @@ $painted-color: hsla(352, 69%, 29%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #bf081d;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -141,234 +134,193 @@ $painted-color: hsla(352, 69%, 29%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(242, 84, 103, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(191, 8, 29, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #bf081d;
+}
+.share-button--outline .share-button__text {
+  color: #bf081d;
+}
+.share-button--outline .share-button__icon path {
+  fill: #bf081d;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(191, 8, 29, 0.9);
+  border-color: rgba(191, 8, 29, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(191, 8, 29, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #bf081d;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(191, 8, 29, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #7d1725;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #bf081d;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #7d1725;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #bf081d;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/PocketButton.vue b/src/components/PocketButton.vue
index dd6434e..9911149 100644
--- a/src/components/PocketButton.vue
+++ b/src/components/PocketButton.vue
@@ -53,12 +53,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(352, 85%, 59%, 1);
-$focus-color: hsla(352, 79%, 84%, 0.4);
-$hover-color: hsla(352, 85%, 59%, 0.9);
-$painted-color: hsla(351, 62%, 49%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -70,10 +65,8 @@ $painted-color: hsla(351, 62%, 49%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #ef3e55;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -86,234 +79,193 @@ $painted-color: hsla(351, 62%, 49%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(246, 182, 191, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(239, 62, 85, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #ef3e55;
+}
+.share-button--outline .share-button__text {
+  color: #ef3e55;
+}
+.share-button--outline .share-button__icon path {
+  fill: #ef3e55;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(239, 62, 85, 0.9);
+  border-color: rgba(239, 62, 85, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(239, 62, 85, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #ef3e55;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(239, 62, 85, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #ca2f47;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #ef3e55;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #ca2f47;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #ef3e55;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/RedditButton.vue b/src/components/RedditButton.vue
index 7fcc934..ef571ab 100644
--- a/src/components/RedditButton.vue
+++ b/src/components/RedditButton.vue
@@ -57,12 +57,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(16, 100%, 50%, 1);
-$focus-color: hsla(16, 94%, 75%, 0.4);
-$hover-color: hsla(16, 100%, 50%, 0.9);
-$painted-color: hsla(15, 77%, 40%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -74,10 +69,8 @@ $painted-color: hsla(15, 77%, 40%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #ff4400;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -90,234 +83,193 @@ $painted-color: hsla(15, 77%, 40%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(251, 163, 131, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(255, 68, 0, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #ff4400;
+}
+.share-button--outline .share-button__text {
+  color: #ff4400;
+}
+.share-button--outline .share-button__icon path {
+  fill: #ff4400;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(255, 68, 0, 0.9);
+  border-color: rgba(255, 68, 0, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(255, 68, 0, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #ff4400;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(255, 68, 0, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #b53f17;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #ff4400;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #b53f17;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #ff4400;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/RenrenButton.vue b/src/components/RenrenButton.vue
index 5467157..e173fcd 100644
--- a/src/components/RenrenButton.vue
+++ b/src/components/RenrenButton.vue
@@ -58,12 +58,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(207, 71%, 45%, 1);
-$focus-color: hsla(207, 65%, 50%, 0.4);
-$hover-color: hsla(207, 71%, 45%, 0.9);
-$painted-color: hsla(206, 48%, 35%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -75,10 +70,8 @@ $painted-color: hsla(206, 48%, 35%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #217bc4;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -91,234 +84,193 @@ $painted-color: hsla(206, 48%, 35%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(45, 136, 210, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(33, 123, 196, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #217bc4;
+}
+.share-button--outline .share-button__text {
+  color: #217bc4;
+}
+.share-button--outline .share-button__icon path {
+  fill: #217bc4;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(33, 123, 196, 0.9);
+  border-color: rgba(33, 123, 196, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(33, 123, 196, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #217bc4;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(33, 123, 196, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #2e5f84;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #217bc4;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #2e5f84;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #217bc4;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/TelegramButton.vue b/src/components/TelegramButton.vue
index 488673d..7f78275 100644
--- a/src/components/TelegramButton.vue
+++ b/src/components/TelegramButton.vue
@@ -45,12 +45,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(200, 74%, 53%, 1);
-$focus-color: hsla(200, 68%, 78%, 0.4);
-$hover-color: hsla(200, 74%, 53%, 0.9);
-$painted-color: hsla(199, 51%, 43%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -62,10 +57,8 @@ $painted-color: hsla(199, 51%, 43%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #2ea5e0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -78,234 +71,193 @@ $painted-color: hsla(199, 51%, 43%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(161, 212, 237, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(46, 165, 224, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #2ea5e0;
+}
+.share-button--outline .share-button__text {
+  color: #2ea5e0;
+}
+.share-button--outline .share-button__icon path {
+  fill: #2ea5e0;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(46, 165, 224, 0.9);
+  border-color: rgba(46, 165, 224, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(46, 165, 224, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #2ea5e0;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(46, 165, 224, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #3682a6;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #2ea5e0;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #3682a6;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #2ea5e0;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/TumblrButton.vue b/src/components/TumblrButton.vue
index 773bcdf..ee1fae2 100644
--- a/src/components/TumblrButton.vue
+++ b/src/components/TumblrButton.vue
@@ -107,12 +107,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(215, 27%, 29%, 1);
-$focus-color: hsla(215, 21%, 54%, 0.4);
-$hover-color: hsla(215, 27%, 29%, 0.9);
-$painted-color: hsla(214, 4%, 19%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -124,10 +119,8 @@ $painted-color: hsla(214, 4%, 19%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #36475e;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -140,234 +133,193 @@ $painted-color: hsla(214, 4%, 19%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(113, 134, 162, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(54, 71, 94, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #36475e;
+}
+.share-button--outline .share-button__text {
+  color: #36475e;
+}
+.share-button--outline .share-button__icon path {
+  fill: #36475e;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(54, 71, 94, 0.9);
+  border-color: rgba(54, 71, 94, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(54, 71, 94, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #36475e;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(54, 71, 94, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #2f3032;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #36475e;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #2f3032;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #36475e;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/TwitterButton.vue b/src/components/TwitterButton.vue
index 2f789a3..a45a3bb 100644
--- a/src/components/TwitterButton.vue
+++ b/src/components/TwitterButton.vue
@@ -62,12 +62,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(203, 89%, 53%, 1);
-$focus-color: hsla(203, 82%, 78%, 0.4);
-$hover-color: hsla(203, 89%, 53%, 0.9);
-$painted-color: hsla(202, 66%, 43%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -79,10 +74,8 @@ $painted-color: hsla(202, 66%, 43%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #1ca0f2;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -95,234 +88,193 @@ $painted-color: hsla(202, 66%, 43%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(153, 210, 245, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(28, 160, 242, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #1ca0f2;
+}
+.share-button--outline .share-button__text {
+  color: #1ca0f2;
+}
+.share-button--outline .share-button__icon path {
+  fill: #1ca0f2;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(28, 160, 242, 0.9);
+  border-color: rgba(28, 160, 242, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(28, 160, 242, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #1ca0f2;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(28, 160, 242, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #2581b6;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #1ca0f2;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #2581b6;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #1ca0f2;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/ViberButton.vue b/src/components/ViberButton.vue
index 1d0394c..636e77e 100644
--- a/src/components/ViberButton.vue
+++ b/src/components/ViberButton.vue
@@ -51,12 +51,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(248, 33%, 52%, 1);
-$focus-color: hsla(248, 27%, 77%, 0.4);
-$hover-color: hsla(248, 33%, 52%, 0.9);
-$painted-color: hsla(247, 10%, 42%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -68,10 +63,8 @@ $painted-color: hsla(247, 10%, 42%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #675cad;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -84,234 +77,193 @@ $painted-color: hsla(247, 10%, 42%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(185, 181, 212, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(103, 92, 173, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #675cad;
+}
+.share-button--outline .share-button__text {
+  color: #675cad;
+}
+.share-button--outline .share-button__icon path {
+  fill: #675cad;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(103, 92, 173, 0.9);
+  border-color: rgba(103, 92, 173, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(103, 92, 173, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #675cad;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(103, 92, 173, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #636076;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #675cad;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #636076;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #675cad;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/VkontakteButton.vue b/src/components/VkontakteButton.vue
index 176fdf1..f7851b8 100644
--- a/src/components/VkontakteButton.vue
+++ b/src/components/VkontakteButton.vue
@@ -116,12 +116,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(212, 28%, 52%, 1);
-$focus-color: hsla(212, 22%, 77%, 0.4);
-$hover-color: hsla(212, 28%, 52%, 0.9);
-$painted-color: hsla(211, 5%, 42%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -133,10 +128,8 @@ $painted-color: hsla(211, 5%, 42%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #6282a7;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -149,234 +142,193 @@ $painted-color: hsla(211, 5%, 42%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(183, 195, 209, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(98, 130, 167, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #6282a7;
+}
+.share-button--outline .share-button__text {
+  color: #6282a7;
+}
+.share-button--outline .share-button__icon path {
+  fill: #6282a7;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(98, 130, 167, 0.9);
+  border-color: rgba(98, 130, 167, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(98, 130, 167, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #6282a7;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(98, 130, 167, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #666b70;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #6282a7;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #666b70;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #6282a7;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/WeiboButton.vue b/src/components/WeiboButton.vue
index 06a1478..c329976 100644
--- a/src/components/WeiboButton.vue
+++ b/src/components/WeiboButton.vue
@@ -66,12 +66,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(181, 100%, 20%, 1);
-$focus-color: hsla(181, 94%, 45%, 0.4);
-$hover-color: hsla(181, 100%, 20%, 0.9);
-$painted-color: hsla(180, 77%, 10%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -83,10 +78,8 @@ $painted-color: hsla(180, 77%, 10%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #006466;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -99,234 +92,193 @@ $painted-color: hsla(180, 77%, 10%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(7, 219, 223, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(0, 100, 102, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #006466;
+}
+.share-button--outline .share-button__text {
+  color: #006466;
+}
+.share-button--outline .share-button__icon path {
+  fill: #006466;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(0, 100, 102, 0.9);
+  border-color: rgba(0, 100, 102, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(0, 100, 102, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #006466;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(0, 100, 102, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #062d2d;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #006466;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #062d2d;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #006466;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/WhatsAppButton.vue b/src/components/WhatsAppButton.vue
index 4c64517..14695a5 100644
--- a/src/components/WhatsAppButton.vue
+++ b/src/components/WhatsAppButton.vue
@@ -41,12 +41,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(142, 70%, 49%, 1);
-$focus-color: hsla(142, 64%, 74%, 0.4);
-$hover-color: hsla(142, 70%, 49%, 0.9);
-$painted-color: hsla(141, 47%, 39%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -58,10 +53,8 @@ $painted-color: hsla(141, 47%, 39%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #25d466;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -74,234 +67,193 @@ $painted-color: hsla(141, 47%, 39%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(146, 231, 177, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(37, 212, 102, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #25d466;
+}
+.share-button--outline .share-button__text {
+  color: #25d466;
+}
+.share-button--outline .share-button__icon path {
+  fill: #25d466;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(37, 212, 102, 0.9);
+  border-color: rgba(37, 212, 102, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(37, 212, 102, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #25d466;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(37, 212, 102, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #359255;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #25d466;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #359255;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #25d466;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>
diff --git a/src/components/XingButton.vue b/src/components/XingButton.vue
index f7545d4..41488db 100644
--- a/src/components/XingButton.vue
+++ b/src/components/XingButton.vue
@@ -53,12 +53,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-$main-color: hsla(181, 100%, 20%, 1);
-$focus-color: hsla(181, 94%, 45%, 0.4);
-$hover-color: hsla(181, 100%, 20%, 0.9);
-$painted-color: hsla(180, 77%, 10%, 1);
-
+<style lang="css" scoped>
 .share-button * {
   box-sizing: border-box;
 }
@@ -70,10 +65,8 @@ $painted-color: hsla(180, 77%, 10%, 1);
   padding: 10px 8px;
   margin: 4px;
   color: #fff;
-  background-color: $main-color;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+  background-color: #006466;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   vertical-align: top;
   user-select: none;
@@ -86,234 +79,193 @@ $painted-color: hsla(180, 77%, 10%, 1);
   letter-spacing: normal;
   word-spacing: normal;
   text-shadow: none;
-  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
-
-  &:disabled {
-    opacity: 0.9;
-  }
-
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 3px $focus-color;
-  }
-
-  &:hover {
-    background-color: $hover-color;
-  }
+  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
+}
+.share-button:disabled {
+  opacity: 0.9;
+}
+.share-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(7, 219, 223, 0.4);
+}
+.share-button:hover {
+  background-color: rgba(0, 100, 102, 0.9);
+}
+.share-button:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+.share-button:last-child {
+  margin-right: 0;
+}
+.share-button__icon {
+  display: inline-block;
+  padding: 0;
+  margin: 0 7px;
+  font-size: 0;
+  vertical-align: middle;
+}
+.share-button__icon path {
+  fill: #fff;
+}
+.share-button__icon:last-child {
+  margin: 0;
+}
+.share-button__text {
+  display: inline-block;
+  margin: 0 7px;
+  font-size: 16px;
+  vertical-align: middle;
+}
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+.share-button--circle {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 10px;
+  border-radius: 42px;
+}
+.share-button--outline {
+  background-color: transparent;
+  border: 1px solid;
+  background-color: transparent;
+  border-color: #006466;
+}
+.share-button--outline .share-button__text {
+  color: #006466;
+}
+.share-button--outline .share-button__icon path {
+  fill: #006466;
+}
+.share-button--outline .share-button__counter {
+  color: rgba(0, 100, 102, 0.9);
+  border-color: rgba(0, 100, 102, 0.9);
+}
+.share-button--outline:hover {
+  background-color: transparent;
+  border-color: rgba(0, 100, 102, 0.9);
+}
+.share-button--outline:hover .share-button__text {
+  color: #006466;
+}
+.share-button--outline:hover .share-button__icon path {
+  fill: rgba(0, 100, 102, 0.9);
+}
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+  border-color: #062d2d;
+}
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #006466;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  margin: 0;
+}
+.share-button--painted .share-button__text {
+  display: none;
+}
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+  color: #fff;
+  border-color: #062d2d;
+}
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+  background-color: #006466;
+}
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:hover .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+.share-button--painted:focus .share-button__counter::before {
+  transform: translate3d(0px, 0px, 0);
+}
 
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
   }
-
-  &:last-child {
-    margin-right: 0;
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    margin: 0 4px;
   }
-
-  &__icon {
-    display: inline-block;
-    padding: 0;
-    margin: 0 7px;
-    font-size: 0;
-    vertical-align: middle;
-
-    path {
-      fill: #fff;
-    }
-
-    &:last-child {
-      margin: 0;
-    }
+  .share-button__text {
+    margin: 0 4px;
+    font-size: 14px;
   }
-
-  &__text {
-    display: inline-block;
-    margin: 0 7px;
-    font-size: 16px;
-    vertical-align: middle;
+  .share-button--circle {
+    border-radius: 38px;
   }
-
-  &__counter {
-    display: inline-block;
-    padding: 3px 10px;
-    margin-left: 4px;
-    font-size: 12px;
-    border-left: 1px solid #fff;
-    vertical-align: middle;
+  .share-button--painted {
+    min-width: 48px;
+    min-height: 48px;
+    margin: 4px 4px 20px 4px;
   }
-
-  &--circle {
-    min-width: 42px;
-    min-height: 42px;
-    padding: 10px;
-    border-radius: 42px;
+  .share-button--painted::before {
+    transform: translate3d(2.5px, 1.5px, 0);
   }
-
-  &--outline {
-    background-color: transparent;
-    border: 1px solid;
-    background-color: transparent;
-    border-color: $main-color;
-
-    .share-button__text {
-      color: $main-color;
-    }
-
-    .share-button__icon path {
-      fill: $main-color;
-    }
-
-    .share-button__counter {
-      color: $hover-color;
-      border-color: $hover-color;
-    }
-
-    &:hover {
-      background-color: transparent;
-      border-color: $hover-color;
-
-      .share-button__text {
-        color: $main-color;
-      }
-
-      .share-button__icon path {
-        fill: $hover-color;
-      }
-    }
+  .share-button--painted .share-button__icon {
+    width: 20px;
+    height: 20px;
   }
-
-  &--painted {
-    position: relative;
-    min-width: 42px;
-    min-height: 42px;
-    padding: 15px;
-    margin-bottom: 30px;
-    border-radius: 42px;
-    background-color: transparent;
-    border: 3px solid;
-    border-color: $painted-color;
-
-    &::before {
-      content: "";
-      z-index: -1;
-      position: absolute;
-      top: -1.5px;
-      left: -1.5px;
-      display: block;
-      width: calc(100% + 3px);
-      height: calc(100% + 3px);
-      background-color: $main-color;
-      border-radius: 50%;
-      transform: translate3d(3px, 2px, 0);
-      transition: transform 0.2s ease-in-out;
-    }
-
-    .share-button__icon {
-      width: 30px;
-      height: 30px;
-      margin: 0;
-    }
-
-    .share-button__text {
-      display: none;
-    }
-
-    .share-button__counter {
-      position: absolute;
-      bottom: -30px;
-      right: -7px;
-      margin: 0;
-      padding: 4px 10px;
-      border: 3px solid;
-      font-size: 8px;
-      border-radius: 15px;
-      color: #fff;
-      border-color: $painted-color;
-
-      &::before {
-        content: "";
-        z-index: -1;
-        position: absolute;
-        top: -1.65px;
-        left: -1.5px;
-        display: block;
-        width: calc(100% + 3px);
-        height: calc(100% + 3px);
-        border-radius: 15px;
-        transform: translate3d(-3px, 1.5px, 0);
-        transition: transform 0.2s ease-in-out;
-        background-color: $main-color;
-      }
-    }
-
-    &:hover {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
-
-    &:focus {
-      &::before {
-        transform: translate3d(0, 0, 0);
-      }
-
-      .share-button__counter::before {
-        transform: translate3d(0px, 0px, 0);
-      }
-    }
+  .share-button--painted .share-button__counter {
+    bottom: -24px;
+    right: -8px;
+    padding: 2px 7px;
   }
-}
-
-@media (max-width: 768px) {
-  .share-button {
-    min-width: 38px;
-    min-height: 38px;
-    padding: 8px 8px;
-    margin: 2px;
-
-    &__icon {
-      width: 18px;
-      height: 18px;
-      margin: 0 4px;
-    }
-
-    &__text {
-      margin: 0 4px;
-      font-size: 14px;
-    }
-
-    &--circle {
-      border-radius: 38px;
-    }
-
-    &--painted {
-      min-width: 48px;
-      min-height: 48px;
-      margin: 4px 4px 20px 4px;
-
-      &::before {
-        transform: translate3d(2.5px, 1.5px, 0);
-      }
-
-      .share-button__icon {
-        width: 20px;
-        height: 20px;
-      }
-
-      .share-button__counter {
-        bottom: -24px;
-        right: -8px;
-        padding: 2px 7px;
-
-        &::before {
-          transform: translate3d(-2px, 1.75px, 0);
-        }
-      }
-    }
+  .share-button--painted .share-button__counter::before {
+    transform: translate3d(-2px, 1.75px, 0);
   }
 }
 </style>