You are here

Home » API reference » Better Social Sharing Buttons 8.3

better_social_sharing_buttons.css in Better Social Sharing Buttons 8.3

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

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

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

.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. .social-sharing-buttons__button {

  10.   text-decoration: none;

  11.   margin: 0 4px;

  12.   display: flex;

  13.   justify-content: center;

  14.   align-items: center;

  15. }

  16. 

  17. .btnCopy {

  18.   position: relative;

  19.   padding: 0;

  20.   cursor: pointer;

  21. }

  22. 

  23. .social-sharing-buttons__popup {

  24.   position: absolute;

  25.   left: 50%;

  26.   top: 0;

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

  28.   background-color: black;

  29.   color: white;

  30.   font-size: small;

  31.   padding: 4px;

  32.   border-radius: 3px;

  33.   opacity: 0;

  34.   height: 0;

  35.   overflow: hidden;

  36.   transition: all .5s ease;

  37. }

  38. 

  39. .social-sharing-buttons__popup.visible {

  40.   opacity: 1;

  41.   height: auto;

  42.   overflow: unset;

  43. }

  44. 

  45. .social-sharing-buttons__popup:before {

  46.   position: absolute;

  47.   left: 50%;

  48.   bottom: 0;

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

  50.   display: block;

  51.   content: '';

  52.   width: 0;

  53.   height: 0;

  54.   border-left: 10px solid transparent;

  55.   border-right: 10px solid transparent;

  56.   border-top: 10px solid black;

  57. }