Cushion buttons

free css buttons

These social icons buttons have specific design and animation, they were created in order to have a kind of “cushion” effect. These buttons are free css buttons!

In order to achieve this css animation you will find below the various codes to be used. Despite using Bricks builder, I tried to list up all the necessary steps to complete the buttons to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For Bricks builder, please follow the HTML/CSS structure so you can add-up divs, add icon block (therefore Font Awesome) instead of the <i> tag, and give them CSS instead of putting them into the code element in order to avoid FOUC as the code block will be loaded lastly within the page priority list.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding reset has been applied and the font is not defined, the container div doesn’t have any background color and the <a> tag is not “unset”.

Load Font Awesome library if necessary, please adapt according to your builder:

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

HTML:

<section class="cush-section">
  <div class="cush-ctn">
    <a class="cush-item" href="#" aria-label="facebook">
      <i class="cush-icon fa-brands fa-facebook-f"></i>
    </a>
    <a class="cush-item" href="#" aria-label="instagram">
      <i class="cush-icon fa-brands fa-instagram"></i>
    </a>
    <a class="cush-item" href="#" aria-label="twitter">
      <i class="cush-icon fa-brands fa-twitter"></i>
    </a>
    <a class="cush-item" href="#" aria-label="linkedin">
      <i class="cush-icon fa-brands fa-linkedin-in"></i>
    </a>
    <a class="cush-item" href="#" aria-label="pinterest">
      <i class="cush-icon fa-brands fa-pinterest-p"></i>
    </a>
  </div>
  <div class="cush-ctn2">
    <a class="cush-item2" href="#" aria-label="facebook">
      <i class="cush-icon2 fa-brands fa-facebook-f"></i>
    </a>
    <a class="cush-item2" href="#" aria-label="instagram">
      <i class="cush-icon2 fa-brands fa-instagram"></i>
    </a>
    <a class="cush-item2" href="#" aria-label="twitter">
      <i class="cush-icon2 fa-brands fa-twitter"></i>
    </a>
    <a class="cush-item2" href="#" aria-label="linkedin">
      <i class="cush-icon2 fa-brands fa-linkedin-in"></i>
    </a>
    <a class="cush-item2" href="#" aria-label="pinterest">
      <i class="cush-icon2 fa-brands fa-pinterest-p"></i>
    </a>
  </div>
</section>

CSS:

.cush-section {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #202020;
  justify-content: center;
  min-height: 75vh;
  width: 100%;
}
.cush-ctn {
  display: flex;
  flex-direction: row;
  margin-bottom: 150px;
  border-radius: 50px;
  background: linear-gradient(145deg, #222222, #1d1d1d);
  box-shadow: 17px 17px 34px #101010, -17px -17px 34px #303030;
}
.cush-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.cush-icon {
  font-size: 48px;
  color: white;
  transition: all 0.3s linear;
}
.cush-item:hover {
  border-top: 0.5px solid rgba(255, 255, 255, 0.5);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.5);
  transition: all 0.3s linear;
}

@media only screen and (max-width: 768px) {
  .cush-item:hover {
    border-top: 0px solid rgba(255, 255, 255, 0.5);
    border-bottom: 0px solid rgba(255, 255, 255, 0.5);
    border-left: 0.5px solid rgba(255, 255, 255, 0.5);
    border-right: 0.5px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s linear;
  }
  .cush-ctn {
    flex-direction: column;
  }
  .cush-item:first-child {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 0 !important;
  }
  .cush-item:last-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
  }
}
.cush-item:active {
  box-shadow: inset 20px 20px 40px #111111, inset -20px -20px 40px #2f2f2f;
}
.cush-item:before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  transform: scale(0, 2);
  transform-origin: center;
  transition: all 0.2s linear;
  border-radius: 50px;
}
.cush-item:hover.cush-item:before {
  transform: scale(2, 2);
}
.cush-item:active .cush-icon {
  transform: scale(0.9);
  transition: all 0.3s linear;
}
.cush-item:first-child {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}
.cush-item:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}
.cush-ctn2 {
  display: flex;
  flex-direction: row;
}
.cush-item2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem;
  width: 75px;
  height: 75px;
  border-radius: 50px;
  background: linear-gradient(145deg, #222222, #1d1d1d);
  box-shadow: 15px 15px 30px #101010, -15px -15px 30px #303030;
  transition: all 0.3s linear;
}
.cush-icon2 {
  font-size: 30px;
  color: white;
  transition: all 0.3s linear;
}
.cush-item2:active {
  background: linear-gradient(145deg, #101010, #303030);
  box-shadow: 5px 5px 10px #101010, -5px -5px 10px #303030;
  transform: scale(0.95);
  transition: all 0.3s linear;
}

.cush-item2:active .cush-icon2 {
  transform: scale(0.9);
  transition: all 0.3s linear;
}

.cush-item2:active .cush-icon2 {
  transform: scale(0.9);
  transition: all 0.3s linear;
}
@media only screen and (max-width: 768px) {
  .cush-ctn2 {
    flex-direction: column;
  }
}