3D Social Buttons Concept

Developer
Fabrizio Bianchi
Size
2,549 Kb
Views
38,456
  1. 3D Social Buttons Concept Previews
  2. 3D Social Buttons Concept HTML Codes
  3. 3D Social Buttons Concept CSS Codes

How do I make an 3d social buttons concept?

Enjoy it!. What is a 3d social buttons concept? How do you make a 3d social buttons concept? This script and codes were developed by Fabrizio Bianchi on 07 August 2022, Sunday.

3D Social Buttons Concept Previews
IQ Test

3D Social Buttons Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Social Buttons Concept</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"><div class="button pinterest"> <div class="cover"><i class="fa fa-pinterest"></i></div> <div class="widget">	<a data-pin-do="buttonFollow" href="http://it.pinterest.com/pinterest/">Follow Pinterest</a>
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script> </div>
</div>
</div>
<div class="wrapper">
<div class="button twitter"> <div class="cover"><i class="fa fa-twitter"></i></div> <div class="widget">	<a href="https://twitter.com/CodePen" class="twitter-follow-button" data-show-count="false" data-size="small">Follow @CodePen</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div>
</div> </div>
<h1>Social Buttons Concept</h1> <script src='http://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js'></script>
</body>
</html>

3D Social Buttons Concept - Script Codes CSS Codes

* { box-sizing: border-box; }
html,
body { height: 100%; margin: 0;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #D5D9EF 100%); background-image: linear-gradient(top, #FFFFFF 0%, #D5D9EF 100%);
}
.cover { height: 40px; border-radius: 3px; text-align: center; -webkit-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; opacity: 1;
}
.twitter .cover { background: -webkit-linear-gradient(top,#2EC8FA,#29B5E2); background: linear-gradient(top,#2EC8FA,#29B5E2);
}
.pinterest .cover { background: -webkit-linear-gradient(top,#E7364C,#D4242B); background: linear-gradient(top,#E7364C,#D4242B);
}
.pinterest .widget > a { margin: 0 3px 0 0!important;
}
.cover i { color: #fff; font-size: 25px; margin-top: 7px; text-shadow: rgba(0,0,0,0.2) 0px 1px 0px;
}
.button { height: 40px; border-radius: 3px; -webkit-transform-origin: center center -15px; transform-origin: center center -15px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out;	display: block; margin: 20px; cursor: pointer;
}
.wrapper { -webkit-perspective: 100px; perspective: 100px; }
.button:hover { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); }
.button:hover .cover { opacity: 1; }
.widget { height: 40px; background: #f0f2f5; border-radius: 3px; -webkit-transform-origin: center top; transform-origin: center top; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); padding: 9px; border:1px solid #ddd; border-bottom: 1px solid #ccc
}
h1 {	font: 20px sans-serif; font-weight: 300; margin-top: 70px; color: #999;
}
3D Social Buttons Concept - Script Codes
3D Social Buttons Concept - Script Codes
Home Page Home
Developer Fabrizio Bianchi
Username fbrz
Uploaded August 07, 2022
Rating 4.5
Size 2,549 Kb
Views 38,456
Do you need developer help for 3D Social Buttons Concept?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Fabrizio Bianchi (fbrz) Script Codes
Name
Related Pens Plugin for Codepen coders.
Mobile App Pages Animation
Coolors Loader
CSS Only iPhone 6
Circular Buttons Animation Concept
Pull Menu - Menu Interaction Concept
Simple Responsive Text
Pure CSS One Div Weather Animated Icons
CSS3 Only - Semantic Sandwich
CSS 3D Bending Effect - Page Flip
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!