Social Media Buttons With CSS3 Cubic Bezier Transition Effect

Posted by Erwin Widianto

Thursday, January 22, 2015

Blogger Widgets social media

Social Media Buttons With CSS3 Cubic Bezier Transition Effect - Hallo TRENDING NEWS, In the article that you are reading this time with the title Social Media Buttons With CSS3 Cubic Bezier Transition Effect, we have prepared this article well for you to read and take the information in it. hopefully the contents of the post Article Blogger Widgets, Article social media, what we write you can understand. all right, have a nice reading.

Title : Social Media Buttons With CSS3 Cubic Bezier Transition Effect
link : Social Media Buttons With CSS3 Cubic Bezier Transition Effect

Social Media Buttons With CSS3 Cubic Bezier Transition Effect

Hi friends, Today I came up with new social media widget or buttons with CSS3 cubic bezier transition effect. There are many social media widgets with transition effect you might seen before but this widget have transition effects with cubic bezier. and button is highlighted with awesome effects such as bouncing ( like using j Query easing ) well get on with it.

Also Read: How To Add Professional Author Box In Blogger Below Post

HTML Code

HTML structure of button divided it in li to facilitate the increase / decrease buttons you want , please delete the section "< li > <a href="#" class="icon cb" > < span > ....... < / span > </a> < / li >". For example, If you want to delete YouTube button then just delete < li > <a href="#" class="icon ytube" > < span > YouTube < / span > </a> < / li >.

[<div id="buttoncb">
<ul>
   <li ><a href="#" class="icon fb" ><span>Facebook</span></a></li>
   <li ><a href="#" class="icon twiter" ><span>Twitter</span></a></li>
   <li ><a href="#" class="icon google" ><span>Google+</span></a></li>
   <li ><a href="#" class="icon pint" ><span>Pinterest</span></a></li>
   <li ><a href="#" class="icon linkedin" ><span>LinkedIn</span></a></li>
   <li ><a href="#" class="icon devart" ><span>DeviantArt</span></a></li>
   <li ><a href="#" class="icon ytube" ><span>Youtube</span></a></li>
   <li ><a href="#" class="icon rss" ><span>RSS</span></a></li>
</ul>
</div>]

 

CSS And CSS3 Transition :

Below is the CSS code used to create the effect on this button . CSS3 is used to give the effect is by using a cubic - bezier transition ( 1,2,0,0 ) is on all elements . For more details see the code below.

[#buttoncb ul {margin:10px 15px;padding:0px;}
#buttoncb ul li {list-style-type: none;padding: 0;background: transparent;margin: 0;}
#buttoncb ul li a{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB0K3f8hp1CTGyKKXSEKRujgnSCSFTAEVP4_p0PTL1WkRqOg652_mHMohIJLoac76J22zp7HiWWRpTAq_mJ_xIPFW0UcC_F-HMu0JLH0JMJE91T44pGPWgI5MrhxguMbI7dsuVFeDcSQ/s1600/blsocial12.png') 0 0 no-repeat;   height:48px;padding-left: 48px;cursor: pointer;text-decoration: none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width: 220px;}
#buttoncb ul li:hover span {margin-left: 10px;opacity: 1;}
#buttoncb ul li span {border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color: white;
margin-left: 100px;
opacity: 0;
position: relative;
text-align: center;
width: auto;
padding: 5px 10px;
transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
top: 14px;}
#buttoncb span{padding:5px;background:#000;color:#fff;margin:0 5px;}
#buttoncb .fb span {background-color: #0853A3;}
#buttoncb .twiter span {background-color: #00B1F7;}
#buttoncb .google span {background-color: #9E0202;}
#buttoncb .pint span {background-color: #D00;}
#buttoncb .linkedin span {background-color: #005075;}
#buttoncb .devart span {background-color: #4C7A4A;}
#buttoncb .ytube span {background-color: #A00;}
#buttoncb .rss span {background-color: #EC5601;}
#buttoncb a.fb {  background-position: 0 -384px;}
#buttoncb a.twiter {  background-position: 0 -432px;}
#buttoncb a.google {  background-position: 0 -480px;}
#buttoncb a.pint {  background-position: 0 -528px;}
#buttoncb a.linkedin {  background-position: 0 -576px;}
#buttoncb a.devart { background-position: 0 -624px;}
#buttoncb a.ytube {  background-position: 0 -672px;}
#buttoncb a.rss {  background-position: 0 -720px;}
#buttoncb a.fb:hover { background-position: 0 0px;color: #0374DD;}
#buttoncb a.twiter:hover {  background-position: 0 -48px;color: #00A1DF;}
#buttoncb a.google:hover {  background-position: 0 -96px;color: #A70000;}
#buttoncb a.pint:hover {  background-position: 0 -144px;color: #C00;}
#buttoncb a.linkedin:hover {  background-position: 0 -192px;color: #005772;}
#buttoncb a.devart:hover { background-position: 0 -240px;color: #4C7A4A;}
#buttoncb a.ytube:hover {  background-position: 0 -288px;color: #A00;}
#buttoncb a.rss:hover {  background-position: 0 -336px;color: #EC5601;]

 

How To Install This Widget In Blogger :

1. Go to Blogger Dashbord >>Layout
 

2. Click Add a Gadget



3. Choose HTML/Javascript



Copy below Code :

[<style type="text/css">
#buttoncb ul {margin:10px 15px;padding:0px;}
#buttoncb ul li {list-style-type: none;padding: 0;background: transparent;margin: 0;}
#buttoncb ul li a{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB0K3f8hp1CTGyKKXSEKRujgnSCSFTAEVP4_p0PTL1WkRqOg652_mHMohIJLoac76J22zp7HiWWRpTAq_mJ_xIPFW0UcC_F-HMu0JLH0JMJE91T44pGPWgI5MrhxguMbI7dsuVFeDcSQ/s1600/blsocial12.png') 0 0 no-repeat;   height:48px;padding-left: 48px;cursor: pointer;text-decoration: none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width: 220px;}
#buttoncb ul li:hover span {margin-left: 10px;opacity: 1;}
#buttoncb ul li span {border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color: white;
margin-left: 100px;
opacity: 0;
position: relative;
text-align: center;
width: auto;
padding: 5px 10px;
transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
top: 14px;}
#buttoncb span{padding:5px;background:#000;color:#fff;margin:0 5px;}
#buttoncb .fb span {background-color: #0853A3;}
#buttoncb .twiter span {background-color: #00B1F7;}
#buttoncb .google span {background-color: #9E0202;}
#buttoncb .pint span {background-color: #D00;}
#buttoncb .linkedin span {background-color: #005075;}
#buttoncb .devart span {background-color: #4C7A4A;}
#buttoncb .ytube span {background-color: #A00;}
#buttoncb .rss span {background-color: #EC5601;}
#buttoncb a.fb {  background-position: 0 -384px;}
#buttoncb a.twiter {  background-position: 0 -432px;}
#buttoncb a.google {  background-position: 0 -480px;}
#buttoncb a.pint {  background-position: 0 -528px;}
#buttoncb a.linkedin {  background-position: 0 -576px;}
#buttoncb a.devart { background-position: 0 -624px;}
#buttoncb a.ytube {  background-position: 0 -672px;}
#buttoncb a.rss {  background-position: 0 -720px;}
#buttoncb a.fb:hover { background-position: 0 0px;color: #0374DD;}
#buttoncb a.twiter:hover {  background-position: 0 -48px;color: #00A1DF;}
#buttoncb a.google:hover {  background-position: 0 -96px;color: #A70000;}
#buttoncb a.pint:hover {  background-position: 0 -144px;color: #C00;}
#buttoncb a.linkedin:hover {  background-position: 0 -192px;color: #005772;}
#buttoncb a.devart:hover { background-position: 0 -240px;color: #4C7A4A;}
#buttoncb a.ytube:hover {  background-position: 0 -288px;color: #A00;}
#buttoncb a.rss:hover {  background-position: 0 -336px;color: #EC5601;}
</style>
<div id="buttoncb">
<ul>
   <li ><a href="Your Facebook Page URL" class="icon fb" ><span>Facebook</span></a></li>
   <li ><a href="Your Twitter Page URL" class="icon twiter" ><span>Twitter</span></a></li>
   <li ><a href="Your Google+ ID" class="icon google" ><span>Google+</span></a></li>
   <li ><a href="Your Pinterest ID" class="icon pint" ><span>Pinterest</span></a></li>
   <li ><a href="Your Linkedin Page URL" class="icon linkedin" ><span>LinkedIn</span></a></li>
   <li ><a href="Your Deviant Art URL" class="icon devart" ><span>DeviantArt</span></a></li>
   <li ><a href="Your Youtube ID" class="icon ytube" ><span>Youtube</span></a></li>
   <li ><a href="Your RSS ID" class="icon rss" ><span>RSS</span></a></li>
</ul>
</div>]

Please replace the part that highlighted in Red color with your link". So if you want to increase your followers/fan page likes grab this widget now ! 

Thus the article Social Media Buttons With CSS3 Cubic Bezier Transition Effect

That's the article Social Media Buttons With CSS3 Cubic Bezier Transition Effect this time, hopefully it can be of benefit to all of you. well, see you in another article post.

You are now reading the article Social Media Buttons With CSS3 Cubic Bezier Transition Effect with the link address https://poccoll.blogspot.com/2015/01/social-media-buttons-with-css3-cubic.html