Levitating Drop Shadow Social Icons

Install Steps

Levitating Drop Shadow Social Icons

Submitted by Noughts and Ones Works with all template families

ezgif-5-477f7bfce0c6.gif

Step One

Add a Social Links block to a page and set up the alignment and size to your liking.

Make sure the style setting is set to Regular. Once finished, hit save.

static1.squarespace.png

Step Two

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Three

Copy and paste the code below into the Custom CSS Editor box.

// Drop Shadow Social Icons //

.sqs-block-socialaccountlinks-v2 a {
  overflow: visible;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.sqs-block-socialaccountlinks-v2 a:before {
  pointer-events: none;
  position: absolute;
  z-index: 1000000;
  content: ' ';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.sqs-block-socialaccountlinks-v2 a:hover, .sqs-block-socialaccountlinks-v2 a:focus, .sqs-block-socialaccountlinks-v2 a:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
.sqs-block-socialaccountlinks-v2 a:hover:before, .sqs-block-socialaccountlinks-v2 a:focus:before, .sqs-block-socialaccountlinks-v2 a:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
}

.social-icons-style-regular .sqs-use--icon{
  fill: #000000 !important;
}
.social-icons-style-regular .sqs-svg-icon--wrapper:hover .sqs-use--icon{
  fill: #FECB2F !important;
}

Step Four

Change the fill values to the color of your choice.

Save and refresh the page. 👍

Moov Labs