HomeHTML & CSS4 Social Media icons Button Using HTML CSS and JS

4 Social Media icons Button Using HTML CSS and JS

social media icons
Social Media icons Button Using HTML, CSS, and JavaScript 

Stylish social media sharing button using HTML CSS & JS. Share button has four different social media options like Facebook, Youtube, Twitter, and Pinterest. The Social Media Buttons allow our web page visitors and content viewers to easily understand our website content with their social media connections & networks. Social media sharing buttons are very important for any website ranking. These buttons are also very useful for website SEO.

On the above image, you see that there is a social media sharing button with a linear gradient background color. whenever you click on the social share button the social sharing options like Youtube, Facebook, Twitter, and Pinterest appear below the share button with animation. Each social media button white border shade and hover effect whenever you move the arrow on that social media button.

Stylish Social Media icons Button (Source Code)

All necessary source codes have been given below in three different boxes. The first box has the HTML code of the above program and the second box has CSS code. There is some javascript code in the third box. The below-given javascript code is very important for button animation. There is a copy codes button below each source code box. which source code you want to copy only click on the below blue copy codes button. They automatically copy when you click on the button.

Create an HTML(Hypertext Markup Language) file with the name of index.html and Add the given codes in your HTML file. Remember that the newly created index.html file must have a .html extension. Another file extension could not work properly. After that, you need to create a CSS file with the name of style.css, or the file name can be different, and then paste the given codes in your CSS file. Remember, you have to create a CSS coding file with .css extensions.

I have given below the necessary source codes, you can copy them from there.Add fontawesome link and script  file in head section of html code 

CSS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <div class="social-container">
  <div class="btn-share">Share</div>
  <div class="social youtube"><a href="#" target="_blank"><i class="fa fa-youtube"></i></a></div>
  <div class="social facebook"><a href="#" target="_blank"><i class="fa fa-facebook"></i></div>
  <div class="social pinterest"><a href="#" target="_blank"><i class="fa fa-pinterest"></i></div>
  <div class="social twitter"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
  	</filter>
  </defs>
</svg>
    

CSS:

      @import url('https://fonts.googleapis.com/css?family=poppins:200,300,400,600');
 body {
	 font-family: 'poppins', sans-serif;
     background: rgb(14,33,236);
     background: linear-gradient(90deg, rgba(14,33,236,1) 0%, rgba(11,11,11,1) 0%);
	 overflow: hidden;
}
 .social-container {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 height: 100vh;
	 filter: url('#goo');       
}
 .btn-share {
	 z-index: 99;
	 position: absolute;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 width: 150px;
	 height: 40px;
	 background: rgb(14,33,236);
     background: linear-gradient(90deg, rgba(14,33,236,1) 0%, rgba(227,20,20,1) 100%);
	 border-radius: 20px;
	 color: #fff;
	 font-size: 30px;
	 letter-spacing: 1px;
	 font-weight: 200;
}
 .social {
	 opacity: 0;
	 position: relative;
	 margin: 8px;
	 width: 40px;
	 height: 40px;
	 border-radius: 100%;
	 display: inline-block;
	 color: #fff;
	 font-size: 20px;
	 text-align: center;
}
 .social:hover {
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
     box-shadow: 0 0 10px #ccc;
 }
 .social i {
	 margin-top: 10px;
}
 .social a {
	 color: #fff;
}
 .twitter {
	 background: #00aced;
}
 .facebook {
	 background: #3b5998;
}
 .pinterest {
	 background: #c8232c;
}
 .youtube {
	 background: #b00;
}
 .clicked {
	 opacity: 1;
	 transition: 1.2s all ease;
	 transform: translateY(56px);
}
    

JavaScript:

      $(".btn-share").click(function(){
  $(".social.twitter").toggleClass("clicked");
  $(".social.facebook").toggleClass("clicked");
 $(".social.pinterest").toggleClass("clicked");
  $(".social.youtube").toggleClass("clicked");
})
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

All Categories

Most Popular