CSS Social Media Icons with Border

CSS Social Media Icons with Border

HTML
<div class="btn instagram">
  <div class="inner-btn">
    <i class="fab fa-instagram"></i>
  </div>
</div>

<div class="btn facebook">
  <div class="inner-btn">
    <i class="fab fa-facebook-f"></i>
  </div>
</div>

<div class="btn twitter">
  <div class="inner-btn">
    <i class="fab fa-twitter"></i>
  </div>
</div>

<div class="btn pinterest">
  <div class="inner-btn">
    <i class="fab fa-pinterest-p"></i>
  </div>
</div>

<div class="btn whatsapp">
  <div class="inner-btn">
    <i class="fab fa-whatsapp"></i>
  </div>
</div>

<div class="btn snapchat">
  <div class="inner-btn">
    <i class="fab fa-snapchat"></i>
  </div>
</div>

<div class="btn google-plus">
  <div class="inner-btn">
    <i class="fab fa-google-plus-g"></i>
  </div>
</div>

<div class="btn linkedin">
  <div class="inner-btn">
    <i class="fab fa-linkedin"></i>
  </div>
</div>

<div class="btn youtube">
  <div class="inner-btn">
    <i class="fab fa-youtube"></i>
  </div>
</div>

<!-- Second Border -->
<div class="btn instagram">
  <div class="inner-btn">
     <div class="second-border">
       <i class="fab fa-instagram"></i>
     </div>
  </div>
</div>

<div class="btn facebook">
  <div class="inner-btn">
    <div class="second-border">
       <i class="fab fa-facebook-f"></i>
     </div>
  </div>
</div>

<div class="btn twitter">
  <div class="inner-btn">
     <div class="second-border">
       <i class="fab fa-twitter"></i>
     </div>
  </div>
</div>

<div class="btn pinterest">
  <div class="inner-btn">
    <div class="second-border">
       <i class="fab fa-pinterest-p"></i>
     </div>
  </div>
</div>

<div class="btn whatsapp">
  <div class="inner-btn">
    <div class="second-border">
       <i class="fab fa-whatsapp"></i>
     </div>
  </div>
</div>

<div class="btn snapchat">
  <div class="inner-btn">
     <div class="second-border">
       <i class="fab fa-snapchat"></i>
     </div>
  </div>
</div>

<div class="btn google-plus">
  <div class="inner-btn">
     <div class="second-border">
      <i class="fab fa-google-plus-g"></i>
     </div>
  </div>
</div>

<div class="btn linkedin">
  <div class="inner-btn">
     <div class="second-border">
       <i class="fab fa-linkedin"></i>
     </div>
  </div>
</div>

<div class="btn youtube">
  <div class="inner-btn">
     <div class="second-border">
       <i class="fab fa-youtube"></i>
      </div>
  </div>
</div>
 
<!-- Round Border Icon -->
<div class="round-btn instagram">
  <div class="inner-btn">
    <i class="fab fa-instagram"></i>
  </div>
</div>

<div class="round-btn facebook">
  <div class="inner-btn">
    <i class="fab fa-facebook-f"></i>
  </div>
</div>

<div class="round-btn twitter">
  <div class="inner-btn">
    <i class="fab fa-twitter"></i>
  </div>
</div>

<div class="round-btn pinterest">
  <div class="inner-btn">
    <i class="fab fa-pinterest-p"></i>
  </div>
</div>

<div class="round-btn whatsapp">
  <div class="inner-btn">
    <i class="fab fa-whatsapp"></i>
  </div>
</div>

<div class="round-btn snapchat">
  <div class="inner-btn">
    <i class="fab fa-snapchat"></i>
  </div>
</div>

<div class="round-btn google-plus">
  <div class="inner-btn">
    <i class="fab fa-google-plus-g"></i>
  </div>
</div>

<div class="round-btn linkedin">
  <div class="inner-btn">
    <i class="fab fa-linkedin"></i>
  </div>
</div>

<div class="round-btn youtube">
  <div class="inner-btn">
    <i class="fab fa-youtube"></i>
  </div>
</div>

<!-- Round Second Border Icon -->
<div class="round-btn instagram">
  <div class="inner-btn">
     <div class="second-border">
       <i class="fab fa-instagram"></i>
     </div>
  </div>
</div>

<div class="round-btn facebook">
  <div class="inner-btn">
    <div class="second-border">
       <i class="fab fa-facebook-f"></i>
     </div>
  </div>
</div>

<div class="round-btn twitter">
  <div class="inner-btn">
     <div class="second-border">
       <i class="fab fa-twitter"></i>
     </div>
  </div>
</div>

<div class="round-btn pinterest">
  <div class="inner-btn">
    <div class="second-border">
       <i class="fab fa-pinterest-p"></i>
     </div>
  </div>
</div>

<div class="round-btn whatsapp">
  <div class="inner-btn">
    <div class="second-border">
       <i class="fab fa-whatsapp"></i>
     </div>
  </div>
</div>

<div class="round-btn snapchat">
  <div class="inner-btn">
     <div class="second-border">
       <i class="fab fa-snapchat"></i>
     </div>
  </div>
</div>

<div class="round-btn google-plus">
  <div class="inner-btn">
     <div class="second-border">
      <i class="fab fa-google-plus-g"></i>
     </div>
  </div>
</div>

<div class="round-btn linkedin">
  <div class="inner-btn">
     <div class="second-border">
       <i class="fab fa-linkedin"></i>
     </div>
  </div>
</div>

<div class="round-btn youtube">
  <div class="inner-btn">
     <div class="second-border">
       <i class="fab fa-youtube"></i>
      </div>
  </div>
</div>


<!-- White Circle Icons -->
<div class="btn instagram">
  <div class="inner-white-btn">
    <i class="fab fa-instagram"></i>
  </div>
</div>

<div class="btn facebook">
  <div class="inner-white-btn">
    <i class="fab fa-facebook-f"></i>
  </div>
</div>

<div class="btn twitter">
  <div class="inner-white-btn">
    <i class="fab fa-twitter"></i>
  </div>
</div>

<div class="btn pinterest">
  <div class="inner-white-btn">
    <i class="fab fa-pinterest-p"></i>
  </div>
</div>

<div class="btn whatsapp">
  <div class="inner-white-btn">
    <i class="fab fa-whatsapp"></i>
  </div>
</div>

<div class="btn snapchat">
  <div class="inner-white-btn">
    <i class="fab fa-snapchat"></i>
  </div>
</div>

<div class="btn google-plus">
  <div class="inner-white-btn">
    <i class="fab fa-google-plus-g"></i>
  </div>
</div>

<div class="btn linkedin">
  <div class="inner-white-btn">
    <i class="fab fa-linkedin"></i>
  </div>
</div>

<div class="btn youtube">
  <div class="inner-white-btn">
    <i class="fab fa-youtube"></i>
  </div>
</div>
CSS
.btn{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  margin: 10px;
}

.round-btn{
  width: 100px;
  height: 100px;
  border-radius: 10px; 
  margin: 10px;
  display: inline-block;
  position: relative;
}
 
i{
  color: #FFF;
  font-size: 30px;
}

.instagram{
  background-image: linear-gradient(to right top, #fcac0f, #fd9522, #fa7f30, #f36a3c, #e85647, #e44751, #dd395b, #d42d65, #d12174, #ca1b85, #be1e96, #ae27a8);
}

.facebook{
   background-image: linear-gradient(to right top, #405d9a, #3f5c9a, #3e5b99, #3c5a99, #3b5998);
}

.twitter{
  background: #1d9ceb;
}

.pinterest{
  background: #bc071a;
}

.google-plus{
  background: #dc4a38;
}

.snapchat{
  background: #f7f401;
}
 
.whatsapp{
  background: #00bb4a;
}

.linkedin{
  background: #0077b5;
}

.youtube{
  background: #ff0000;
}

.btn .inner-btn {
  border: 3px solid #FFF; 
  width: 96%; 
  height: 96%;  
  border-radius: 50%; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn .second-border{
  border: 3px solid #FFF; 
  width: 92%; 
  height: 92%;  
  border-radius: 50%; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.round-btn .inner-btn {
  border: 3px solid #FFF; 
  width: 96%; 
  height: 96%;  
  position: absolute; 
  border-radius: 10px;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.round-btn .second-border{
  border: 3px solid #FFF; 
  width: 92%; 
  height: 92%;  
  border-radius: 5px; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn .inner-white-btn{
  background: #FFF;
  border: 3px solid #FFF; 
  width: 96%; 
  height: 96%;  
  border-radius: 50%; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner-white-btn .fa-instagram{
      background: linear-gradient(45deg, #FF874F, #F64F90);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

.inner-white-btn .fa-facebook-f{
     background-image: linear-gradient(to right top, #405d9a, #3f5c9a, #3e5b99, #3c5a99, #3b5998);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

.inner-white-btn .fa-twitter{
    background: #1d9ceb;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

.inner-white-btn .fa-pinterest-p{
    background: #bc071a;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

.inner-white-btn .fa-google-plus-g{
     background: #dc4a38;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

.inner-white-btn .fa-snapchat{
     background: #f7f401;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
}

.inner-white-btn .fa-whatsapp{
  background: #00bb4a; 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
}

.inner-white-btn .fa-linkedin{
   background: #0077b5;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
}

.inner-white-btn .fa-youtube{
   background: #ff0000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
}

DEMO

367 Views
54920cookie-checkCSS Social Media Icons with Border

Leave a Reply

Your email address will not be published. Required fields are marked *