Share Button CSS

share.css

/* Share Start */
.share {
  width: 100%;
  background-color: #f7f7f7;
  font-size: 12px;
  border-bottom: 1px solid #f0f0f0;
  max-height: 100px;
  min-height: 55px!important;
}
.share h5 {
  color: #333 !important;
  font-size: 15px !important;
  line-height: 55px !important;
}
.socmed-shares {
  margin-top: 20px;
}
.socmed-shares * {
  box-sizing: border-box;
  border-radius: 5px;
}
.socmed-share {
  display: inline-block;
  vertical-align: top;
  margin: 0.3em 0.6em 0.3em 0;
}
.socmed-share:last-child {
  margin-right: 0;
}
.socmed-share-logo {
  width: 1em;
  vertical-align: middle;
  font-size: 1.5em;
}
img.socmed-share-logo {
  width: auto;
  height: 1em;
}
.socmed-share-link {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 1;
}
.socmed-share-link.socmed-share-link-count {
  padding-top: 0.2em;
}
.socmed-share-link.socmed-share-link-count .socmed-share-count {
  display: block;
  font-size: 0.6em;
  margin: 0 -0.5em -0.8em -0.5em;
}
.socmed-share-link.socmed-share-no-count {
  padding-top: 0.5em;
}
.socmed-share-link.socmed-share-no-count .socmed-share-count {
  height: 1em;
}
.socmed-share-label {
  padding-left: 0.3em;
  vertical-align: middle;
}
.socmed-share-count-box {
  display: inline-block;
  height: 1.5em;
  padding: 0 0.3em;
  line-height: 1;
  vertical-align: middle;
  cursor: default;
}
.socmed-share-count-box.socmed-share-no-count {
  display: none;
}
.socmed-share-count {
  line-height: 1.5em;
  vertical-align: middle;
}

.socmed-share-twitter .socmed-share-link {
  background: #00aced;
}
.socmed-share-twitter .socmed-share-link:hover {
  background: #0087ba;
}
.socmed-share-facebook .socmed-share-link {
  background: #3b5998;
}
.socmed-share-facebook .socmed-share-link:hover {
  background: #2d4373;
}
.socmed-share-googleplus .socmed-share-link {
  background: #dd4b39;
}
.socmed-share-googleplus .socmed-share-link:hover {
  background: #c23321;
}
.socmed-share-link {
  padding: 0.5em 0.6em;
  color: #fff;
  -webkit-transition: background 200ms ease-in-out,
    border-color 200ms ease-in-out;
  transition: background 200ms ease-in-out, border-color 200ms ease-in-out;
}
.socmed-share-link:hover,
.socmed-share-link:focus,
.socmed-share-link:active {
  color: #fff;
}
.socmed-share-count-box {
  position: relative;
  width: 50px;
  height: 2.5em;
  padding: 0 0.3em;
  margin-left: 0.3em;
  text-align: center;
  border: 1px solid gainsboro;
  background: transparent;
  -webkit-transition: background 200ms ease-in-out,
    border-color 200ms ease-in-out;
  transition: background 200ms ease-in-out, border-color 200ms ease-in-out;
}
.socmed-share-count-box:hover {
  background: gainsboro;
}
.socmed-share-count-box:hover:after {
  border-color: transparent gainsboro transparent transparent;
}
.socmed-share-count-box:after {
  content: "";
  display: block;
  position: absolute;
  top: 0.85em;
  left: -0.3em;
  width: 0;
  height: 0;
  border-width: 0.4em 0.4em 0.4em 0;
  border-style: solid;
  border-color: transparent #f5f5f5 transparent transparent;
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: background 200ms ease-in-out,
    border-color 200ms ease-in-out;
  transition: background 200ms ease-in-out, border-color 200ms ease-in-out;
}
.socmed-share-count-box .socmed-share-count {
  line-height: 2.5em;
  color: #444;
}
/* Share End */