Buttons Shared

Developer
Angel Komander
Size
5,222 Kb
Views
24,288
  1. Buttons Shared Previews
  2. Buttons Shared HTML Codes
  3. Buttons Shared CSS Codes

How do I make an buttons shared?

What is a buttons shared? How do you make a buttons shared? This script and codes were developed by Angel Komander on 17 October 2022, Monday.

Buttons Shared Previews
IQ Test

Buttons Shared - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Buttons Shared</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet' type='text/css' />
<div id="button-count-share"> <div id="social_share"> <div class="ct-wrapper" style="width: 670px;margin-bottom: 20px;;"> <div id="share-buttons"> <div class="facebook2 share-button"> <i class="icon">
<i class="fa fa-facebook"></i></i> <div class="pslide"> <p> facebook </p> </div> <div class="fb-like fb_iframe_widget" data-action="like" data-layout="button_count" data-share="false" data-show-faces="false" fb-xfbml-state="rendered" fb-iframe-plugin-query="action=like&amp;app_id=&amp;container_width=150&amp;href=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;share=false&amp;show_faces=false"><span style="vertical-align: bottom; width: 76px; height: 20px;"><iframe name="f263c70cd" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:like Facebook Social Plugin" src="https://www.facebook.com/plugins/like.php?action=like&amp;app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F1ldYU13brY_.js%3Fversion%3D41%23cb%3Df46cc8f8c%26domain%3Dfabulous-themexpose.blogspot.com.es%26origin%3Dhttp%253A%252F%252Ffabulous-themexpose.blogspot.com.es%252Ff22e672778%26relation%3Dparent.parent&amp;container_width=150&amp;href=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;share=false&amp;show_faces=false" style="border: none; visibility: visible; width: 76px; height: 20px;" class=""></iframe></span></div> </div> <div class="twitter share-button"> <i class="icon">
<i class="fa fa-twitter">
</i> </i> <div class="pslide"> <p> twitter </p> </div> <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="https://platform.twitter.com/widgets/tweet_button.c197f64a14a7434e6e58ca9722b54406.en.html#_=1434079281248&amp;count=horizontal&amp;dnt=false&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html&amp;size=m&amp;text=Praesent%20vitae%20quam%20vitae%20arcu%20posuer&amp;url=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html" class="twitter-share-button twitter-tweet-button twitter-share-button twitter-count-horizontal" title="Twitter Tweet Button" data-twttr-rendered="true" style="position: static; visibility: visible; width: 78px; height: 20px;"></iframe> <script async="async" src="https://platform.twitter.com/widgets.js" type="text/javascript"></script> </div> <div class="google share-button"> <i class="icon">
<i class="fa fa-google-plus">
</i> </i> <div class="pslide"> <p> google+ </p> </div> <div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px; background: transparent;"> <iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" width="100%" id="I0_1434079277984" name="I0_1434079277984" src="https://apis.google.com/u/0/se/0/_/+1/fastbutton?usegapi=1&amp;count=true&amp;size=medium&amp;hl=en_GB&amp;origin=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es&amp;url=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html&amp;gsrc=3p&amp;ic=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.es_419.uo26R4UA1o4.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCOIHLVC9W8O2cGJE7KEo9t8UhusPQ#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I0_1434079277984&amp;parent=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es&amp;pfname=&amp;rpctoken=41178637" data-gapiattached="true" title="+1"></iframe> </div> <script type="text/javascript"> window.___gcfg = {lang: 'id'}; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> <div class="facebook1 share-button"> <i class="icon">
<i class="fa fa-facebook"></i></i> <div class="pslide"> <p> fb share </p> </div> <a class="fb-share-button fb_iframe_widget" name="fb_share" rel="nofollow" share_url="&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url" type="button_count" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=&amp;container_width=0&amp;href=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html&amp;locale=en_US&amp;sdk=joey&amp;type=button_count"><span style="vertical-align: bottom; width: 84px; height: 20px;"><iframe name="f1f1ef37fc" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:share_button Facebook Social Plugin" src="https://www.facebook.com/plugins/share_button.php?app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F1ldYU13brY_.js%3Fversion%3D41%23cb%3Df289b19248%26domain%3Dfabulous-themexpose.blogspot.com.es%26origin%3Dhttp%253A%252F%252Ffabulous-themexpose.blogspot.com.es%252Ff22e672778%26relation%3Dparent.parent&amp;container_width=0&amp;href=http%3A%2F%2Ffabulous-themexpose.blogspot.com.es%2F2014%2F03%2Fpraesent-vitae-quam-vitae-arcu-posuer.html&amp;locale=en_US&amp;sdk=joey&amp;type=button_count" style="border: none; visibility: visible; width: 84px; height: 20px;" class=""></iframe></span></a> </div> </div> </div> </div>
</div>
</body>
</html>

Buttons Shared - Script Codes CSS Codes

/* CSS Slide Share Button */
#button-count-share { width: 100%; overflow: hidden; background: transparent; margin: 0 auto; padding: 3px; margin-top: 15px; margin-bottom: 15px;
}
#button-count-share span { float: left; position: relative; font-size: 13px; color: #fff; margin: 12px 5px 12px 5px
}
.button-share { background: #f0f0f0; position: relative; display: block; float: left; height: 40px; overflow: hidden; width: 140px; margin: 4px; border-radius: 1px;
}
.slide-share { z-index: 2; display: block; height: 100%; left: 0; position: absolute; width: 140px; margin: 0
}
.slide-share p { font-family: 'Open Sans'; font-weight: 400; color: #fff; font-size: 16px; left: 0; position: absolute; text-align: center; top: 10px; width: 100%; margin: 0
}
.button-share .slide-share { transition: all 0.4s ease-in-out
}
.facebook .fb_iframe_widget { display: block; position: absolute; right: 15px; top: 0; z-index: 1
}
.twitter iframe { right: 10px; top: 10px; z-index: 1; display: block; position: absolute
}
.google #___plusone_0 { width: 90px!important; top: 10px; right: 10px; position: absolute; display: block; z-index: 1
}
.facebook .slide-share { background: #4f79bc
}
.twitter .slide-share { background: #63cef2
}
.google .slide-share { background: #f36261
}
.facebook:hover .slide-share,
.twitter:hover .slide-share,
.google:hover .slide-share { left: 140px; opacity: 0.6;
}
/*	SOCIAL ICONS
/*-----------------------------------------------------------------------------------*/
.social { padding: 0; margin: 0 0 -5px 0; font-size: 0; line-height: 1;
}
.social li { display: inline-block; font-family: 'fontello-social'; margin-right: 5px; margin-bottom: 5px;
}
.text-center .social li { margin: 0 2px
}
.social.pull-right li { margin: 0 0 0 5px
}
.social li a { display: table
}
.social li a i { text-align: center; display: table-cell; vertical-align: middle; color: #f5f5f5; background: none; line-height: 1; border: 1px solid #aaa; width: 32px; height: 32px !important; line-height: 1; font-size: 18px; -webkit-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in;
}
.social .fa-pinterest { border-color: #d8545d; color: #d8545d;
}
.social .fa-rss { border-color: #faaa5e; color: #faaa5e;
}
.social .fa-facebook { border-color: #677fb5; color: #677fb5;
}
.social .fa-twitter { border-color: #70c2e9; color: #70c2e9;
}
.social .fa-flickr { border-color: #ff3ba4; color: #ff3ba4;
}
.social .fa-dribbble { border-color: #e299c2; color: #e299c2;
}
.social .fa-behance { border-color: #42a9fb; color: #42a9fb;
}
.social .fa-linkedin { border-color: #3daccf; color: #3daccf;
}
.social .fa-vimeo { border-color: #42b5d4; color: #42b5d4;
}
.social .fa-youtube { border-color: #d5615c; color: #d5615c;
}
.social .fa-skype { border-color: #5ecbf3; color: #5ecbf3;
}
.social .fa-tumblr { border-color: #829fb9; color: #829fb9;
}
.social .fa-delicious { border-color: #6194dc; color: #6194dc;
}
.social .fa-500px { border-color: #3bbbe6; color: #3bbbe6;
}
.social .fa-grooveshark { border-color: #f88e3b; color: #f88e3b;
}
.social .fa-forrst { border-color: #5f9864; color: #5f9864;
}
.social .fa-digg { border-color: #507faa; color: #507faa;
}
.social .fa-blogger { border-color: #fd893f; color: #fd893f;
}
.social .fa-klout { border-color: #e16747; color: #e16747;
}
.social .fa-dropbox { border-color: #6ba3c5; color: #6ba3c5;
}
.social .fa-github { border-color: #6c93bb; color: #6c93bb;
}
.social .fa-songkick { border-color: #ff3b60; color: #ff3b60;
}
.social .fa-posterous { border-color: #efd57c; color: #efd57c;
}
.social .fa-appnet { border-color: #3daad5; color: #3daad5;
}
.social .fa-gplus { border-color: #bc7067; color: #bc7067;
}
.social .fa-stumbleupon { border-color: #f07356; color: #f07356;
}
.social .fa-lastfm { border-color: #cd443d; color: #cd443d;
}
.social .fa-spotify { border-color: #9acf48; color: #9acf48;
}
.social .fa-instagram { border-color: #926d53; color: #926d53;
}
.social .fa-evernote { border-color: #9fdc82; color: #9fdc82;
}
.social .fa-paypal { border-color: #5b85a8; color: #5b85a8;
}
.social .fa-picasa { border-color: #b088c1; color: #b088c1;
}
.social .fa-soundcloud { border-color: #ff8b45; color: #ff8b45;
}
.social a:hover .fa-pinterest { background-color: #d8545d
}
.social a:hover .fa-rss { background-color: #faaa5e
}
.social a:hover .fa-facebook { background-color: #677fb5
}
.social a:hover .fa-twitter { background-color: #70c2e9
}
.social a:hover .fa-flickr { background-color: #ff3ba4
}
.social a:hover .fa-dribbble { background-color: #e299c2
}
.social a:hover .fa-behance { background-color: #42a9fb
}
.social a:hover .fa-linkedin { background-color: #3daccf
}
.social a:hover .fa-vimeo { background-color: #42b5d4
}
.social a:hover .fa-youtube { background-color: #d5615c
}
.social a:hover .fa-skype { background-color: #5ecbf3
}
.social a:hover .fa-tumblr { background-color: #829fb9
}
.social a:hover .fa-delicious { background-color: #6194dc
}
.social a:hover .fa-500px { background-color: #3bbbe6
}
.social a:hover .fa-grooveshark { background-color: #f88e3b
}
.social a:hover .fa-forrst { background-color: #5f9864
}
.social a:hover .fa-digg { background-color: #507faa
}
.social a:hover .fa-blogger { background-color: #fd893f
}
.social a:hover .fa-klout { background-color: #e16747
}
.social a:hover .fa-dropbox { background-color: #6ba3c5
}
.social a:hover .fa-github { background-color: #6c93bb
}
.social a:hover .fa-songkick { background-color: #ff3b60
}
.social a:hover .fa-posterous { background-color: #efd57c
}
.social a:hover .fa-appnet { background-color: #3daad5
}
.social a:hover .fa-gplus { background-color: #bc7067
}
.social a:hover .fa-stumbleupon { background-color: #f07356
}
.social a:hover .fa-lastfm { background-color: #cd443d
}
.social a:hover .fa-spotify { background-color: #9acf48
}
.social a:hover .fa-instagram { background-color: #926d53
}
.social a:hover .fa-evernote { background-color: #9fdc82
}
.social a:hover .fa-paypal { background-color: #5b85a8
}
.social a:hover .fa-picasa { background-color: #b088c1
}
.social a:hover .fa-soundcloud { background-color: #ff8b45
}
.social a:hover a:hover i { background-color: #FFF
}
.social a:hover i { color: #FFF
}
#share-buttons { width: 100%; display: inline-block; text-align: center; margin: 0 auto;
}
.share-button { background: #DCE0E0!important; position: relative; display: block; float: left; height: 40px; overflow: hidden; width: 150px; /*border-radius*/ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin: 0 7px;
}
.icon { display: block; float: left; position: relative; z-index: 3; height: 100%; vertical-align: top; width: 38px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 3px; /*border-radius*/ -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; text-align: center;
}
.icon i { color: #fff; line-height: 42px;
}
.pslide { z-index: 2; display: block; height: 100%; left: 38px; position: absolute; width: 112px; -moz-border-radius-topleft: 0; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 0; /*border-radius*/ -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; margin: 0;
}
.pslide p { font-family: Open Sans; font-weight: 400; border-left: 1px solid rgba(255, 255, 255, 0.35); color: #fff; font-size: 16px; left: 0; position: absolute; text-align: center; top: 8px; width: 100%; margin: 0;
}
.share-button .pslide { /*transition*/ -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
.facebook1 iframe { display: block; position: absolute; right: 5px; top: 0px; z-index: 1;
}
.facebook2 iframe { display: block; position: absolute; right: 5px; top: 0px; z-index: 1;
}
.twitter iframe { width: 90px!important; right: 5px; top: 10px; z-index: 1; display: block; position: absolute;
}
.google #___plusone_0 { width: 70px!important; top: 10px; right: 15px; position: absolute; display: block; z-index: 1;
}
.facebook1:hover .pslide { left: -90px;
}
.facebook2:hover .pslide { left: 150px;
}
.twitter:hover .pslide { left: -90px;
}
.google:hover .pslide { left: 150px;
}
.facebook1 .icon,
.facebook1 .pslide { background: #305c99;
}
.facebook2 .icon,
.facebook2 .pslide { background: #305c99;
}
.twitter .icon,
.twitter .pslide { background: #00cdff;
}
.google .icon,
.google .pslide { background: #d24228;
}
Buttons Shared - Script Codes
Buttons Shared - Script Codes
Home Page Home
Developer Angel Komander
Username AngelKrak
Uploaded October 17, 2022
Rating 3
Size 5,222 Kb
Views 24,288
Do you need developer help for Buttons Shared?

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!

Angel Komander (AngelKrak) Script Codes
Name
Page plugin of Minicajas y estuches
Optimizing jQuery Spoiler Button
Vertical Scrollbars CSS DIV
Spoiler JS Dynamic Spoiler Button
Efecto Particulas By AngelKrak
A Pen by Angel Komander
Awesome Menu Bar
HTML5 Video Antes y Despues Comparacion Slider
360 Degree Product Viewer in HTML5 Canvas
3D cube with reflection
Create amazing Facebook ads 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!