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 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 >.
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.
1. Go to Blogger Dashbord >>Layout
2. Click Add a Gadget
3. Choose HTML/Javascript
Copy below Code :
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 !
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/AVvXsEhewXWdu3x3pmAhiTTPBad8cjv4JYKDz2kvfCnwwLWZWeOXhtxCHLH-Vb2SyYR9OYJUeRfEN6zNeSCGI7qzkW87LL3Yk6Ro0wl8m0QBQiJPz33cQnX1261k7p4zBJzbb1NyFJ86fd4JC-0/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 :
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/AVvXsEhewXWdu3x3pmAhiTTPBad8cjv4JYKDz2kvfCnwwLWZWeOXhtxCHLH-Vb2SyYR9OYJUeRfEN6zNeSCGI7qzkW87LL3Yk6Ro0wl8m0QBQiJPz33cQnX1261k7p4zBJzbb1NyFJ86fd4JC-0/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 !
