You are here

Home » API reference » Better Social Sharing Buttons 8

better_social_sharing_buttons.css in Better Social Sharing Buttons 8

Same filename and directory in other branches
  1. 8.3 css/better_social_sharing_buttons.css
.social-sharing-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2em 0;
}

.social-sharing-buttons a {
  text-decoration: none;
  margin: 0 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnCopy {
  position: relative;
  padding: 0;
}

.social-sharing-buttons__popup {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -100%);
  background-color: black;
  color: white;
  font-size: small;
  padding: 4px;
  border-radius: 3px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all .5s ease;
}

.social-sharing-buttons__popup.visible {
  opacity: 1;
  height: auto;
  overflow: unset;
}

.social-sharing-buttons__popup:before {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  display: block;
  content: '';
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid black;
}

File

css/better_social_sharing_buttons.css
View source 
  1. .social-sharing-buttons {

  2.   display: flex;

  3.   justify-content: center;

  4.   align-items: center;

  5.   margin: 2em 0;

  6. }

  7. 

  8. .social-sharing-buttons a {

  9.   text-decoration: none;

  10.   margin: 0 4px;

  11.   display: flex;

  12.   justify-content: center;

  13.   align-items: center;

  14. }

  15. 

  16. .btnCopy {

  17.   position: relative;

  18.   padding: 0;

  19. }

  20. 

  21. .social-sharing-buttons__popup {

  22.   position: absolute;

  23.   left: 50%;

  24.   top: 0;

  25.   transform: translate(-50%, -100%);

  26.   background-color: black;

  27.   color: white;

  28.   font-size: small;

  29.   padding: 4px;

  30.   border-radius: 3px;

  31.   opacity: 0;

  32.   height: 0;

  33.   overflow: hidden;

  34.   transition: all .5s ease;

  35. }

  36. 

  37. .social-sharing-buttons__popup.visible {

  38.   opacity: 1;

  39.   height: auto;

  40.   overflow: unset;

  41. }

  42. 

  43. .social-sharing-buttons__popup:before {

  44.   position: absolute;

  45.   left: 50%;

  46.   bottom: 0;

  47.   transform: translate(-50%, 100%);

  48.   display: block;

  49.   content: '';

  50.   width: 0;

  51.   height: 0;

  52.   border-left: 10px solid transparent;

  53.   border-right: 10px solid transparent;

  54.   border-top: 10px solid black;

  55. }