5+ Animation Social Media Buttons To Website (HTML Code) - Do Tech Blog

5+ Animation Social Media Buttons To Website (HTML Code)

Surely you are finding the best and attractive social media button for your website. That is when you reached this article.


But don't worry, you are present in the right article. Where you will get the Html code for the social media button to the website.With which you can easily use your website.


If you do not have knowledge of Html code, then there is no problem here, you will be given complete information.


 So that you will not have any problem adding social media buttons to your website.


html-code-for-social-media-buttons-to-website


In this article, you will be shown many types of social media buttons, you can use the code of whatever type of button you like.

So let's start without wasting time.


Floating Social Media Buttons For Website (With Html Code)

html-code-for-social-media-buttons-to-website

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<style>

.floating-social {

position: fixed;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

.floating-social a {

display: block;

text-align: center;

padding: 16px;

transition: all 0.3s ease;

color: white;

font-size: 20px;

}

.floating-social a:hover {

background-color: #000;

}

.facebook {

background: #3B5998;

color: white;

}

.twitter {

background: #55ACEE;

color: white;

}

.linkedin {

background: #007bb5;

 color: white;

}

.youtube {

background: #bb0000;

color: white;

}

</style>

</head>

<body>

 <div class="floating-social">

  <a href="Your Facebook id URL" class="facebook"><i class="fa fa-facebook"></i></a>    

  <a href="Your Twitter id URL"  class="twitter"><i class="fa fa-twitter"></i></a> 

  <a href="Your Linkdin id URL"  class="linkedin"><i class="fa fa-linkedin"></i></a>

  <a href="Your Youtube URL" class="youtube"><i class="fa fa-youtube"></i></a> 

</div>

</body>

</html>


Also Read: YouTube Video & Video Embed Code Html (Complete Guide)


Round Social Media Buttons To Website (With Html Code)


html-code-for-round-social-media-buttons-to-website

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

.fa {

padding: 5px;

font-size: 15px;

width: 15px;

text-align: center;

text-decoration: none;

margin: 5px 2px;

border-radius: 50%;

}

.fa:hover {

opacity: 0.7;

}

.fa-facebook {

background: #3B5998;

color: white;

}

.fa-twitter {

background: #55ACEE;

color: white;

}

.fa-google {

background: #dd4b39;

color: white;

}

.fa-linkedin {

background: #007bb5;

color: white;

}

.fa-youtube {

background: #bb0000;

color: white;

}

.fa-instagram {

background: #125688;

color: white;

}

.fa-pinterest {

background: #cb2027;

color: white;

}

</style>

</head>

<body>

<div class="temp">

<div align="center">

<a href="#" class="fa fa-facebook"></a>

<a href="#" class="fa fa-twitter"></a>

<a href="#" class="fa fa-google"></a>

<a href="#" class="fa fa-linkedin"></a>

<a href="#" class="fa fa-youtube"></a>

<a href="#" class="fa fa-instagram"></a>

<a href="#" class="fa fa-pinterest"></a>

</div> 

</div>

</body>

</html> 


Also Read: How to Make Html Picture Slideshow 


Animation Social Media Buttons To Website (With Html Code)


html-code-for-Animation-social-media-buttons-to-website

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

body {

background: #322f31;

-webkit-font-smoothing: antialiased;

}

a {

text-decoration: none;

color: #fff;

}

ul {

padding: 0;

list-style: none;

}

.footer-social-media-button {

width: 350px;

display: block;

margin: 0 auto;

}

.social-icon {

color: #fff;

}

ul.social-media-button {

margin-top: 50%;

}

.social-media-button li {

vertical-align: top;

display: inline;

height: 100px;

}

.social-media-button a {

color: #fff;

text-decoration: none;

}

.fa-facebook {

padding: 10px 14px;

-o-transition: 0.5s;

-ms-transition: 0.5s;

-moz-transition: 0.5s;

-webkit-transition: 0.5s;

transition: 0.5s;

background-color: #322f30;

}

.fa-instagram {

padding: 10px 14px;

-o-transition: 0.5s;

-ms-transition: 0.5s;

-moz-transition: 0.5s;

-webkit-transition: 0.5s;

transition: 0.5s;

background-color: #322f30;

}

.fa-facebook:hover {

background-color: #3d5b99;

}

.fa-instagram:hover {

background-color: #125688;

}

.fa-twitter {

padding: 10px 12px;

-o-transition: 0.5s;

-ms-transition: 0.5s;

-moz-transition: 0.5s;

-webkit-transition: 0.5s;

transition: 0.5s;

background-color: #322f30;

}

.fa-twitter:hover {

background-color: #00aced;

}

.fa-rss {

padding: 10px 14px;

-o-transition: 0.5s;

-ms-transition: 0.5s;

-moz-transition: 0.5s;

-webkit-transition: 0.5s;

transition: 0.5s;

background-color: #322f30;

}

.fa-rss:hover {

background-color: #eb8231;

}

.fa-youtube {

padding: 10px 14px;

-o-transition: 0.5s;

-ms-transition: 0.5s;

-moz-transition: 0.5s;

-webkit-transition: 0.5s;

transition: 0.5s;

background-color: #322f30;

}

.fa-youtube:hover {

background-color: #e64a41;

}

.fa-linkedin {

padding: 10px 14px;

-o-transition: 0.5s;

-ms-transition: 0.5s;

-moz-transition: 0.5s;

-webkit-transition: 0.5s;

transition: 0.5s;

background-color: #322f30;

}

.fa-linkedin:hover {

background-color: #0073a4;

}

.fa-github {

padding: 10px 14px;

-o-transition: 0.5s;

-ms-transition: 0.5s;

-moz-transition: 0.5s;

-webkit-transition: 0.5s;

transition: 0.5s;

background-color: #322f30;

}

.fa-github:hover {

background-color: #5a32a3;

}

</style>

</head>

<body>

<div class="footer-social-media-button">

<ul class="social-media-button">

<li><a href="" class="social-media-button"> <i class="fa fa-facebook"></i></a></li>

<li><a href="" class="social-media-button"> <i class="fa fa-twitter"></i></a></li>

<li><a href="" class="social-media-button"> <i class="fa fa-instagram"></i></a></li>

<li><a href="" class="social-media-button"> <i class="fa fa-youtube"></i></a></li>

<li><a href="" class="social-media-button"> <i class="fa fa-linkedin"></i></a></li>

<li><a href="" class="social-media-button"> <i class="fa fa-github"></i></a></li>

</ul>

</div>

</body>

</html>


Square Social Media Buttons To Website (With Html Code)

html-code-for-Squre-social-media-buttons-to-website

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

.fa {

padding: 5px;

font-size: 15px;

width: 15px;

text-align: center;

text-decoration: none;

margin: 5px 2px;

}

.fa:hover {

opacity: 0.7;

}

.fa-facebook {

background: #3B5998;

color: white;

}

.fa-twitter {

background: #55ACEE;

color: white;

}

.fa-google {

background: #dd4b39;

color: white;

}

.fa-linkedin {

background: #007bb5;

color: white;

}

.fa-youtube {

background: #bb0000;

color: white;

}

.fa-instagram {

background: #125688;

color: white;

}

.fa-pinterest {

background: #cb2027;

color: white;

}

</style>

</head>

<body>

<div class="temp">

<div align="center">

<a href="#" class="fa fa-facebook"></a>

<a href="#" class="fa fa-twitter"></a>

<a href="#" class="fa fa-google"></a>

<a href="#" class="fa fa-linkedin"></a>

<a href="#" class="fa fa-youtube"></a>

<a href="#" class="fa fa-instagram"></a>

<a href="#" class="fa fa-pinterest"></a>

</div> 

</div>

</body>

</html>

 

Floating Social Media Share Buttons To Website (With Html Code)

html-code-for-Floating-social-media-share-buttons-to-website

html-code-for-Floating-social-media-share-buttons-to-website

If you want to add a floating share button to your website, then this Html code is definitely useful for you.

In which you can easily embed floating social media share buttons for your website.

So let's know about this code.


<html>

<head>

</head>

<style>

@media screen and (max-width: 980px) {

    .a2a_floating_style.a2a_vertical_style { display: none; }

}

</style>

</head>

<body>

<script async src="https://static.addtoany.com/menu/page.js"></script>

<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;">

    <a class="a2a_button_facebook"></a>

    <a class="a2a_button_twitter"></a>

    <a class="a2a_button_pinterest"></a>

    <a class="a2a_dd" href="https://www.addtoany.com/share"></a>

</div>

</body>

 </html>

 

Also Read: Techniques To Reduce Bounce Rate For Website

No comments :

Post a Comment

;