diedVIPs

html knowhow

Share Media




Share Media







Quellcode
<html>
<head>
<style type="text/css">
.divider {height: 5px;}
@font-face {
font-family: 'share-buttons';
src: url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.eot?gpra60');
src: url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.eot?#iefixgpra60') format('embedded-opentype'), url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.woff?gpra60') format('woff'), url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.ttf?gpra60') format('truetype'), url('https://cdn.rawgit.com/sunnysingh/share-buttons/v1.0.0/build/fonts/share-buttons.svg?gpra60#share-buttons') format('svg');
font-weight: normal;
font-style: normal;}
.share-btn-icon {font-family: 'share-buttons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.share-btn-email .share-btn-icon:before { content: "\e945";}
.share-btn-more .share-btn-icon:before { content: "\ea82";}
.share-btn-googleplus .share-btn-icon:before { content: "\ea88";}
.share-btn-facebook .share-btn-icon:before { content: "\ea8c";}
.share-btn-twitter .share-btn-icon:before { content: "\ea91";}
.share-btn-github .share-btn-icon:before { content: "\eab4";}
.share-btn-tumblr .share-btn-icon:before { content: "\eabb";}
.share-btn-reddit .share-btn-icon:before { content: "\eac7";}
.share-btn-linkedin .share-btn-icon:before { content: "\eac8";}
.share-btn-delicious .share-btn-icon:before { content: "\eacc";}
.share-btn-stumbleupon .share-btn-icon:before { content: "\eace";}
.share-btn-pinterest .share-btn-icon:before { content: "\ead0";}
.share-btn, .share-btn * { box-sizing: border-box;}
.share-btn, .share-btn *, .share-btn *:before, .share-btn *:after { box-sizing: border-box;}
.share-btn {position: relative; display: inline-block; height: 24px; margin: 0; padding: 2px 8px; line-height: 1.53; letter-spacing: 0.04em;
vertical-align: top; font-size: 12px; font-weight: bold; font-family: "Helvetica Neue", Arial, sans-serif; color: #111; background: #e0e0e0; border: 1px solid #c7c7c7;
border-radius: 2px; text-decoration: none; transition: all 0.2s ease;}
.share-btn:hover, .share-btn:focus {background: #d3d3d3; border-color: #bababa; text-decoration: none; color: #111;}
.share-btn:active {background: #c7c7c7; border-color: #adadad; text-decoration: none; color: #111;}
.share-btn.share-btn-sm {height: 20px; font-size: 10px; padding: 0 8px; line-height: 1.6;}
.share-btn.share-btn-lg {height: 28px; font-size: 16px; line-height: 1.4;}
.share-btn .share-btn-text-sr {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
.share-btn.share-btn-branded {color: #fff;}
.share-btn.share-btn-branded.share-btn-twitter { background: #55acee; border-color: #3ea1ec;}
.share-btn.share-btn-branded.share-btn-twitter:hover, .share-btn.share-btn-branded.share-btn-twitter:focus {background: #3ea1ec; border-color: #2795e9;}
.share-btn.share-btn-branded.share-btn-twitter:active {background: #2795e9; border-color: #1689e0;}
.share-btn.share-btn-branded.share-btn-facebook {background: #3b5998; border-color: #344e86;}
.share-btn.share-btn-branded.share-btn-facebook:hover, .share-btn.share-btn-branded.share-btn-facebook:focus {background: #344e86; border-color: #2d4373;}
.share-btn.share-btn-branded.share-btn-facebook:active {background: #2d4373; border-color: #263961;}
.share-btn.share-btn-branded.share-btn-googleplus {background: #dd4b39; color: #fff; border-color: #d73925;}
.share-btn.share-btn-branded.share-btn-googleplus:hover, .share-btn.share-btn-branded.share-btn-googleplus:focus {background: #d73925; border-color: #c23321;}
.share-btn.share-btn-branded.share-btn-googleplus:active {background: #c23321; border-color: #ac2d1e;}
.share-btn.share-btn-branded.share-btn-tumblr {background: #35465c; color: #fff; border-color: #2c3a4c;}
.share-btn.share-btn-branded.share-btn-tumblr:hover, .share-btn.share-btn-branded.share-btn-tumblr:focus {background: #2c3a4c; border-color: #222d3c;}
.share-btn.share-btn-branded.share-btn-tumblr:active {background: #222d3c; border-color: #19212b;}
.share-btn.share-btn-branded.share-btn-reddit {background: #ff4500; color: #fff; border-color: #e63e00;}
.share-btn.share-btn-branded.share-btn-reddit:hover, .share-btn.share-btn-branded.share-btn-reddit:focus {background: #e63e00; border-color: #cc3700;}
.share-btn.share-btn-branded.share-btn-reddit:active {background: #cc3700; border-color: #b33000;}
.share-btn.share-btn-branded.share-btn-linkedin {background: #0976b4; color: #fff; border-color: #08669c;}
.share-btn.share-btn-branded.share-btn-linkedin:hover, .share-btn.share-btn-branded.share-btn-linkedin:focus {background: #08669c; border-color: #075683;}
.share-btn.share-btn-branded.share-btn-linkedin:active {background: #075683; border-color: #05466b;}
.share-btn.share-btn-branded.share-btn-delicious {background: #3399ff; color: #fff; border-color: #198cff;}
.share-btn.share-btn-branded.share-btn-delicious:hover, .share-btn.share-btn-branded.share-btn-delicious:focus {background: #198cff; border-color: #007fff;}
.share-btn.share-btn-branded.share-btn-delicious:active {background: #007fff; border-color: #0073e5;}
.share-btn.share-btn-branded.share-btn-stumbleupon {background: #eb4924; color: #fff; border-color: #e13b15;}
.share-btn.share-btn-branded.share-btn-stumbleupon:hover, .share-btn.share-btn-branded.share-btn-stumbleupon:focus {background: #e13b15; border-color: #ca3412;}
.share-btn.share-btn-branded.share-btn-stumbleupon:active {background: #ca3412; border-color: #b22e10;}
.share-btn.share-btn-branded.share-btn-pinterest {background: #cc2127; color: #fff; border-color: #b61d23;}
.share-btn.share-btn-branded.share-btn-pinterest:hover, .share-btn.share-btn-branded.share-btn-pinterest:focus {background: #b61d23; border-color: #a01a1f;}
.share-btn.share-btn-branded.share-btn-pinterest:active {background: #a01a1f; border-color: #8a161a;}
.share-btn.share-btn-inverse {color: #eeeeee; background: #1f1f1f; border-color: #050505;}
.share-btn.share-btn-inverse:hover, .share-btn.share-btn-inverse:focus {background: #121212; border-color: #000000; color: #eeeeee;}
.share-btn.share-btn-inverse:active {background: #050505; border-color: #000000; color: #eeeeee;}
.share-btn.share-btn-twitter .share-btn-icon, .share-btn.share-btn-googleplus .share-btn-icon, .share-btn.share-btn-tumblr .share-btn-icon, .share-btn.share-btn-linkedin .share-btn-icon,
.share-btn.share-btn-pinterest .share-btn-icon, .share-btn.share-btn-stumbleupon .share-btn-icon, .share-btn.share-btn-delicious .share-btn-icon,
.share-btn.share-btn-more .share-btn-icon {position: relative; top: 1px;}
@-moz-document url-prefix() {
.share-btn.share-btn-twitter .share-btn-icon,
.share-btn.share-btn-googleplus .share-btn-icon,
.share-btn.share-btn-tumblr .share-btn-icon,
.share-btn.share-btn-linkedin .share-btn-icon,
.share-btn.share-btn-pinterest .share-btn-icon,
.share-btn.share-btn-stumbleupon .share-btn-icon,
.share-btn.share-btn-delicious .share-btn-icon,
.share-btn.share-btn-more .share-btn-icon {
top: 0; } }
.share-btn.share-btn-more.share-btn-lg .share-btn-icon {top: 2px;}
.share-btn .share-btn-text {padding-left: 2px;}
</style>
</head>

<body >
<!-- Icon-only Branded Twitter button -->
<a class="share-btn share-btn-branded share-btn-twitter"
href="https://twitter.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq&text=Share Buttons Demo&via=sunnyismoi"
title="Share on Twitter">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Twitter</span>
</a>

<!-- Icon-only Branded Facebook button -->
<a class="share-btn share-btn-branded share-btn-facebook"
href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Facebook">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Facebook</span>
</a>

<!-- Icon-only Branded Google+ button -->
<a class="share-btn share-btn-branded share-btn-googleplus"
href="https://plus.google.com/share?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Google+">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Google+</span>
</a>

<!-- Icon-only Branded Reddit button -->
<a class="share-btn share-btn-branded share-btn-reddit"
href="http://www.reddit.com/submit?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Reddit+">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Reddit</span>
</a>

<!-- Icon-only Branded Tumblr button -->
<a class="share-btn share-btn-branded share-btn-tumblr"
href="https://www.tumblr.com/share/link?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Tumblr">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Tumblr</span>
</a>

<!-- Icon-only Branded LinkedIn button -->
<a class="share-btn share-btn-branded share-btn-linkedin"
href="https://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on LinkedIn">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">LinkedIn</span>
</a>

<!-- Icon-only Branded Pinterest button -->
<a class="share-btn share-btn-branded share-btn-pinterest"
href="https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Pinterest">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Pinterest</span>
</a>

<!-- Icon-only Branded StumbleUpon button -->
<a class="share-btn share-btn-branded share-btn-stumbleupon"
href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on StumbleUpon">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">StumbleUpon</span>
</a>

<!-- Icon-only Branded Delicious button -->
<a class="share-btn share-btn-branded share-btn-delicious"
href="https://delicious.com/save?v=5&noui&jump=close&url=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share on Delicious">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Delicious</span>
</a>

<!-- Icon-only Email button -->
<a class="share-btn share-btn-email"
href="mailto:?subject=Share Buttons Demo&body=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="Share via Email">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">Email</span>
</a>

<!-- Icon-only More/share button -->
<a class="share-btn share-btn-more"
href="https://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fcodepen.io%2Fsunnysingh%2Fpen%2FOPxbgq"
title="More share options">
<span class="share-btn-icon"></span>
<span class="share-btn-text-sr">More</span>
</a>

<script>
(function(){
var shareButtons = document.querySelectorAll(".share-btn");
if (shareButtons) {
[].forEach.call(shareButtons, function(button) {
button.addEventListener("click", function(event) {
var width = 650,
height = 450;
event.preventDefault();
window.open(this.href, 'Share Dialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width='+width+',height='+height+',top='+(screen.height/2-height/2)+',left='+(screen.width/2-width/2));
});
});
}
})();
</script>

 </body>
</html>




Kontakt    Datenschutz   Impressum