Social share buttons using html and css

Total Views : 331
Zoom In Zoom Out Read Later Print

This post is all about create social share buttons in different styles.

flipbox.css

@charset "UTF-8";
/* Flipbox Common Styles */
.pd-flipbox-wrap img {
width: 100%;
}
.pd-flipbox-wrap {
display: block;
text-align: center;
position: relative;
margin-bottom: 30px;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.pd-flipbox-wrap .front-part, .pd-flipbox-wrap .back-part {
height: 100%;
margin-bottom: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 400ms;
transition: 400ms;
}
.pd-flipbox-wrap .front-part {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.pd-flipbox-wrap .back-part {
position: absolute;
top: 0;
width: 100%;
}

/* Horizontal Flip Left */
.pd-flipbox-wrap .horizontal-flip-left .front-part {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.pd-flipbox-wrap .horizontal-flip-left:hover .front-part {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.pd-flipbox-wrap .horizontal-flip-left .back-part {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.pd-flipbox-wrap .horizontal-flip-left:hover .back-part {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/* Horizontal Flip Right */
.pd-flipbox-wrap .horizontal-flip-right .front-part {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.pd-flipbox-wrap .horizontal-flip-right:hover .front-part {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.pd-flipbox-wrap .horizontal-flip-rigaht .back-part {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.pd-flipbox-wrap .horizontal-flip-right:hover .back-part {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}

/* Vertical Flip Bottom */
.pd-flipbox-wrap .vertical-flip-bottom .front-part {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.pd-flipbox-wrap .vertical-flip-bottom:hover .front-part {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.pd-flipbox-wrap .vertical-flip-bottom .back-part {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.pd-flipbox-wrap .vertical-flip-bottom:hover .back-part {
-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}

/* Vertical Flip Top */
.pd-flipbox-wrap .vertical-flip-top .front-part {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.pd-flipbox-wrap .vertical-flip-top:hover .front-part {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.pd-flipbox-wrap .vertical-flip-top .back-part {
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.pd-flipbox-wrap .vertical-flip-top:hover .back-part {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}

social-share.css

@charset "UTF-8";

/* Social Share */
.pd-social-share a {
display: inline-block;
margin: 0.5em;
}

.pd-social-share .social-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
width: 80px;
height: 80px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: #444;
-webkit-box-shadow: 0 0 0 4px #444;
box-shadow: 0 0 0 4px #444;
overflow: hidden;
-webkit-transition: background 0.3s, color 0.3s, box-shadow 0.3s;
transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}

.pd-social-share .social-icon:after {
display: none;
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
box-sizing: content-box;
}

.pd-social-share .social-icon:before {
speak: none;
font-size: 42px;
line-height: 80px;
display: block;
-webkit-font-smoothing: antialiased;
}

.pd-social-share .social-icon:hover {
background: #444;
color: #fff;
-webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.05);
}

.pd-social-share .social-icon:hover:before {
-webkit-animation: animationLeft 0.3s forwards;
animation: animationLeft 0.3s forwards;
}

/* Social Share Colors */
.pd-social-share i[class*="-facebook"] {
color: #4766A9;
-webkit-box-shadow: 0 0 0 4px #4766A9;
box-shadow: 0 0 0 4px #4766A9;
}

.pd-social-share i[class*="-facebook"]:hover {
background: #4766A9;
}

.pd-social-share i[class*="-twitter"] {
color: #00ACED;
-webkit-box-shadow: 0 0 0 4px #00ACED;
box-shadow: 0 0 0 4px #00ACED;
}

.pd-social-share i[class*="-twitter"]:hover {
background: #00ACED;
}

.pd-social-share i[class*="-google-plus"] {
color: #DB4437;
-webkit-box-shadow: 0 0 0 4px #DB4437;
box-shadow: 0 0 0 4px #DB4437;
}

.pd-social-share i[class*="-google-plus"]:hover {
background: #DB4437;
}

.pd-social-share i[class*="-dribbble"] {
color: #CB5D9C;
-webkit-box-shadow: 0 0 0 4px #CB5D9C;
box-shadow: 0 0 0 4px #CB5D9C;
}

.pd-social-share i[class*="-dribbble"]:hover {
background: #CB5D9C;
}

.pd-social-share i[class*="-linkedin"] {
color: #0177B5;
-webkit-box-shadow: 0 0 0 4px #0177B5;
box-shadow: 0 0 0 4px #0177B5;
}

.pd-social-share i[class*="-linkedin"]:hover {
background: #0177B5;
}

.pd-social-share i[class*="-instagram"] {
color: #97369D;
-webkit-box-shadow: 0 0 0 4px #97369D;
box-shadow: 0 0 0 4px #97369D;
}

.pd-social-share i[class*="-instagram"]:hover {
background: #97369D;
}

.pd-social-share i[class*="-pinterest"] {
color: #BB0B1F;
-webkit-box-shadow: 0 0 0 4px #BB0B1F;
box-shadow: 0 0 0 4px #BB0B1F;
}

.pd-social-share i[class*="-pinterest"]:hover {
background: #BB0B1F;
}

.pd-social-share i[class*="-github"] {
color: #323131;
-webkit-box-shadow: 0 0 0 4px #323131;
box-shadow: 0 0 0 4px #323131;
}

.pd-social-share i[class*="-github"]:hover {
background: #323131;
}

.pd-social-share i[class*="-flickr"] {
color: #FF1981;
-webkit-box-shadow: 0 0 0 4px #FF1981;
box-shadow: 0 0 0 4px #FF1981;
}

.pd-social-share i[class*="-flickr"]:hover {
background: #FF1981;
}

.pd-social-share i[class*="-vk"] {
color: #4C75A3;
-webkit-box-shadow: 0 0 0 4px #4C75A3;
box-shadow: 0 0 0 4px #4C75A3;
}

.pd-social-share i[class*="-vk"]:hover {
background: #4C75A3;
}

/* Social Corners */
.pd-social-square .social-icon {
border-radius: 0;
}

.pd-social-round .social-icon {
border-radius: 4px;
}

/* Social Sizes */
.pd-social-small .social-icon {
width: 50px;
height: 50px;
}

.pd-social-small .social-icon:before {
font-size: 24px;
line-height: 50px;
}

.pd-social-medium .social-icon {
width: 64px;
height: 64px;
}

.pd-social-medium .social-icon:before {
font-size: 32px;
line-height: 64px;
}

/* Animation Effect */
.pd-social-share.social-animation-right .social-icon:hover:before {
-webkit-animation: animationRight 0.3s forwards;
animation: animationRight 0.3s forwards;
}

.pd-social-share.social-animation-top .social-icon:hover:before {
-webkit-animation: animationTop 0.3s forwards;
animation: animationTop 0.3s forwards;
}

.pd-social-share.social-animation-bottom .social-icon:hover:before {
-webkit-animation: animationBottom 0.3s forwards;
animation: animationBottom 0.3s forwards;
}

/* Animation Left */
@-webkit-keyframes animationLeft {
49% {
-webkit-transform: translateX(100%);
}

50% {
opacity: 0;
-webkit-transform: translateX(-100%);
}

51% {
opacity: 1;
}
}

@keyframes animationLeft {
49% {
transform: translateX(100%);
}

50% {
opacity: 0;
transform: translateX(-100%);
}

51% {
opacity: 1;
}
}

/* Animation Right */
@-webkit-keyframes animationRight {
49% {
-webkit-transform: translateX(-100%);
}

50% {
opacity: 0;
-webkit-transform: translateX(100%);
}

51% {
opacity: 1;
}
}

@keyframes animationRight {
49% {
transform: translateX(-100%);
}

50% {
opacity: 0;
transform: translateX(100%);
}

51% {
opacity: 1;
}
}

/* Animation Top */
@-webkit-keyframes animationTop {
49% {
-webkit-transform: translateY(100%);
}

50% {
opacity: 0;
-webkit-transform: translateY(-100%);
}

51% {
opacity: 1;
}
}

@keyframes animationTop {
49% {
transform: translateY(100%);
}

50% {
opacity: 0;
transform: translateY(-100%);
}

51% {
opacity: 1;
}
}

/* Animation Bottom */
@-webkit-keyframes animationBottom {
49% {
-webkit-transform: translateY(-100%);
}

50% {
opacity: 0;
-webkit-transform: translateY(100%);
}

51% {
opacity: 1;
}
}

@keyframes animationBottom {
49% {
transform: translateY(-100%);
}

50% {
opacity: 0;
transform: translateY(100%);
}

51% {
opacity: 1;
}
}

social-share.html

<!DOCTYPE html>
<html lang="zxx">
<head>

<!-- meta character set -->
<meta charset="utf-8">
<title>Social Share Buttons</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Fontawesome Icon font -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- bootstrap.min -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- demo stylesheet -->
<link rel="stylesheet" href="css/main.css"> <!-- This file only use demostration -->
<!-- flipbox stylesheet -->
<link rel="stylesheet" href="css/elements/flipbox.css">
<!-- social-share stylesheet -->
<link rel="stylesheet" href="css/social-share.css">

</head>

<body id="body">
<!-- Main Start -->
<main class="site-content">

<!-- Social Share Animation Left Start -->
<section class="sec-spacer sec-color">
<div class="container container-center">
<h3 class="title text-center">Animation Left</h3>
<div class="pd-social-share text-center">
<a href="#1"><i class="social-icon fa fa-facebook"></i></a>
<a href="#1"><i class="social-icon fa fa-twitter"></i></a>
<a href="#1"><i class="social-icon fa fa-google-plus"></i></a>
<a href="#1"><i class="social-icon fa fa-dribbble"></i></a>
<a href="#1"><i class="social-icon fa fa-linkedin"></i></a>
<a href="#1"><i class="social-icon fa fa-instagram"></i></a>
<a href="#1"><i class="social-icon fa fa-pinterest"></i></a>
<a href="#1"><i class="social-icon fa fa-github"></i></a>
<a href="#1"><i class="social-icon fa fa-flickr"></i></a>
<a href="#1"><i class="social-icon fa fa-vk"></i></a>
</div>
</div>
</section>
<!-- Social Share Animation Left End -->

<!-- Social Share Animation Right Start -->
<section class="sec-spacer">
<div class="container container-center">
<h3 class="title text-center">Animation Right</h3>
<div class="pd-social-share social-animation-right text-center">
<a href="#1"><i class="social-icon fa fa-facebook"></i></a>
<a href="#1"><i class="social-icon fa fa-twitter"></i></a>
<a href="#1"><i class="social-icon fa fa-google-plus"></i></a>
<a href="#1"><i class="social-icon fa fa-dribbble"></i></a>
<a href="#1"><i class="social-icon fa fa-linkedin"></i></a>
<a href="#1"><i class="social-icon fa fa-instagram"></i></a>
<a href="#1"><i class="social-icon fa fa-pinterest"></i></a>
<a href="#1"><i class="social-icon fa fa-github"></i></a>
<a href="#1"><i class="social-icon fa fa-flickr"></i></a>
<a href="#1"><i class="social-icon fa fa-vk"></i></a>
</div>
</div>
</section>
<!-- Social Share Animation Right End -->
<!-- Social Share Animation Top Start -->
<section class="sec-spacer sec-color">
<div class="container container-center">
<h3 class="title text-center">Animation Top</h3>
<div class="pd-social-share social-animation-top text-center">
<a href="#1"><i class="social-icon fa fa-facebook"></i></a>
<a href="#1"><i class="social-icon fa fa-twitter"></i></a>
<a href="#1"><i class="social-icon fa fa-google-plus"></i></a>
<a href="#1"><i class="social-icon fa fa-dribbble"></i></a>
<a href="#1"><i class="social-icon fa fa-linkedin"></i></a>
<a href="#1"><i class="social-icon fa fa-instagram"></i></a>
<a href="#1"><i class="social-icon fa fa-pinterest"></i></a>
<a href="#1"><i class="social-icon fa fa-github"></i></a>
<a href="#1"><i class="social-icon fa fa-flickr"></i></a>
<a href="#1"><i class="social-icon fa fa-vk"></i></a>
</div>
</div>
</section>
<!-- Social Share Animation Top End -->
<!-- Social Share Animation Bottom Start -->
<section class="sec-spacer">
<div class="container container-center">
<h3 class="title text-center">Animation Bottom</h3>
<div class="pd-social-share social-animation-bottom text-center">
<a href="#1"><i class="social-icon fa fa-facebook"></i></a>
<a href="#1"><i class="social-icon fa fa-twitter"></i></a>
<a href="#1"><i class="social-icon fa fa-google-plus"></i></a>
<a href="#1"><i class="social-icon fa fa-dribbble"></i></a>
<a href="#1"><i class="social-icon fa fa-linkedin"></i></a>
<a href="#1"><i class="social-icon fa fa-instagram"></i></a>
<a href="#1"><i class="social-icon fa fa-pinterest"></i></a>
<a href="#1"><i class="social-icon fa fa-github"></i></a>
<a href="#1"><i class="social-icon fa fa-flickr"></i></a>
<a href="#1"><i class="social-icon fa fa-vk"></i></a>
</div>
</div>
</section>
<!-- Social Share Animation Bottom End -->
<!-- Social Share Round Start -->
<section class="sec-spacer sec-color">
<div class="container container-center">
<h3 class="title text-center">Round Corners</h3>
<div class="pd-social-share pd-social-round text-center">
<a href="#1"><i class="social-icon fa fa-facebook"></i></a>
<a href="#1"><i class="social-icon fa fa-twitter"></i></a>
<a href="#1"><i class="social-icon fa fa-google-plus"></i></a>
<a href="#1"><i class="social-icon fa fa-dribbble"></i></a>
<a href="#1"><i class="social-icon fa fa-linkedin"></i></a>
<a href="#1"><i class="social-icon fa fa-instagram"></i></a>
<a href="#1"><i class="social-icon fa fa-pinterest"></i></a>
<a href="#1"><i class="social-icon fa fa-github"></i></a>
<a href="#1"><i class="social-icon fa fa-flickr"></i></a>
<a href="#1"><i class="social-icon fa fa-vk"></i></a>
</div>
</div>
</section>
<!-- Social Share Round End -->

<!-- Social Share Square Start -->
<section class="sec-spacer">
<div class="container container-center">
<h3 class="title text-center">Square</h3>
<div class="pd-social-share pd-social-square text-center">
<a href="#1"><i class="social-icon fa fa-facebook"></i></a>
<a href="#1"><i class="social-icon fa fa-twitter"></i></a>
<a href="#1"><i class="social-icon fa fa-google-plus"></i></a>
<a href="#1"><i class="social-icon fa fa-dribbble"></i></a>
<a href="#1"><i class="social-icon fa fa-linkedin"></i></a>
<a href="#1"><i class="social-icon fa fa-instagram"></i></a>
<a href="#1"><i class="social-icon fa fa-pinterest"></i></a>
<a href="#1"><i class="social-icon fa fa-github"></i></a>
<a href="#1"><i class="social-icon fa fa-flickr"></i></a>
<a href="#1"><i class="social-icon fa fa-vk"></i></a>
</div>
</div>
</section>
<!-- Social Share Square End -->

<!-- Social Share Sizes Start -->
<section class="sec-spacer sec-color">
<div class="container container-center">
<h3 class="title text-center">Different Sizes</h3>
<div class="pd-social-share pd-social-small text-center">
<a href="#1"><i class="social-icon fa fa-facebook"></i></a>
<a href="#1"><i class="social-icon fa fa-twitter"></i></a>
<a href="#1"><i class="social-icon fa fa-google-plus"></i></a>
<a href="#1"><i class="social-icon fa fa-dribbble"></i></a>
<a href="#1"><i class="social-icon fa fa-linkedin"></i></a>
<a href="#1"><i class="social-icon fa fa-instagram"></i></a>
<a href="#1"><i class="social-icon fa fa-pinterest"></i></a>
<a href="#1"><i class="social-icon fa fa-github"></i></a>
<a href="#1"><i class="social-icon fa fa-flickr"></i></a>
<a href="#1"><i class="social-icon fa fa-vk"></i></a>
</div>
<div class="spacer3"></div>
<div class="pd-social-share pd-social-medium text-center">
<a href="#1"><i class="social-icon fa fa-facebook"></i></a>
<a href="#1"><i class="social-icon fa fa-twitter"></i></a>
<a href="#1"><i class="social-icon fa fa-google-plus"></i></a>
<a href="#1"><i class="social-icon fa fa-dribbble"></i></a>
<a href="#1"><i class="social-icon fa fa-linkedin"></i></a>
<a href="#1"><i class="social-icon fa fa-instagram"></i></a>
<a href="#1"><i class="social-icon fa fa-pinterest"></i></a>
<a href="#1"><i class="social-icon fa fa-github"></i></a>
<a href="#1"><i class="social-icon fa fa-flickr"></i></a>
<a href="#1"><i class="social-icon fa fa-vk"></i></a>
</div>
<div class="spacer3"></div>
<div class="pd-social-share text-center">
<a href="#1"><i class="social-icon fa fa-facebook"></i></a>
<a href="#1"><i class="social-icon fa fa-twitter"></i></a>
<a href="#1"><i class="social-icon fa fa-google-plus"></i></a>
<a href="#1"><i class="social-icon fa fa-dribbble"></i></a>
<a href="#1"><i class="social-icon fa fa-linkedin"></i></a>
<a href="#1"><i class="social-icon fa fa-instagram"></i></a>
<a href="#1"><i class="social-icon fa fa-pinterest"></i></a>
<a href="#1"><i class="social-icon fa fa-github"></i></a>
<a href="#1"><i class="social-icon fa fa-flickr"></i></a>
<a href="#1"><i class="social-icon fa fa-vk"></i></a>
</div>
</div>
</section>
<!-- Social Share Sizes End -->

</main>
<!-- Main End -->
</body>
</html>

See More

Latest Photos