Blog CSS Sosyal Paylaşım Butonları

<!DOCTYPE html>
<html>
<head>
<style>
.ShareButtons {
    margin: 0;
    padding: 0;
    width: 100%;
    margin-bottom: 12px;
    list-style-type: none;
    background: #ccc;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: flex
}
.ShareButtons svg {
    display: inline-block;
    height: 30px;
    margin: 4px 0;
    vertical-align: top;
    width: 30px;
    fill: #fff
}
.ShareButtons .gp-btn svg {
    margin: 2px 0;
    height: 34px;
    width: 34px
}
.ShareButtons li {
    height: 38px;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
.ShareButtons li a {
    height: 38px;
    display: block;
    text-align: center;
    cursor: pointer;
}
.ShareButtons li.fb-btn a {
    background: #3b5998
}
.ShareButtons li.tw-btn a {
    background: #42a4f5
}
.ShareButtons li.in-btn a {
    background: #008cc9
}
.ShareButtons li.in-btn a {
    background: #0077b5
}
.ShareButtons li.gp-btn a {
    background: #d74314
}
.ShareButtons li.pin-btn a {
    background: #cb2027
}
.ShareButtons li.ws-btn a {
    background: #4dc247
}
.ShareButtons li.print-btn a {
    background: #959595
}
.ShareButtons li.mail-btn a {
    background: #acacac
}
.ShareButtons li.ws-btn a:hover {
    background: #43ad3d;
}
.ShareButtons li.fb-btn a:hover {
    background: #05345c
}
.ShareButtons li.in-btn a:hover {
    background: #008cc9
}
.ShareButtons li.tw-btn a:hover {
    background: #3678af
}
.ShareButtons li.gp-btn a:hover {
    background: #791407
}
.ShareButtons li.pin-btn a:hover {
    background: #8f2217
}
.ShareButtons li.print-btn a:hover,
.ShareButtons li.mail-btn a:hover {
    background: #797979
}
</style>
</head>
<body>
<ul class='ShareButtons'>
    <li class='fb-btn'>
        <a expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url' target='_blank' title='Facebook'>
            <svg alt='Facebook' title='Facebook' viewBox='0 0 32 32'>
                <title>Facebook</title>
                <path d='M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z' />
            </svg>
        </a>
    </li>
    <li class='tw-btn'>
        <a expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' target='_blank' title='Twitter'>
            <svg alt='Twitter' title='Twitter' viewBox='0 0 32 32'>
                <title>Twitter</title>
                <path d='M27.996 10.116c-.81.36-1.68.602-2.592.71a4.526 4.526 0 0 0 1.984-2.496 9.037 9.037 0 0 1-2.866 1.095 4.513 4.513 0 0 0-7.69 4.116 12.81 12.81 0 0 1-9.3-4.715 4.49 4.49 0 0 0-.612 2.27 4.51 4.51 0 0 0 2.008 3.755 4.495 4.495 0 0 1-2.044-.564v.057a4.515 4.515 0 0 0 3.62 4.425 4.52 4.52 0 0 1-2.04.077 4.517 4.517 0 0 0 4.217 3.134 9.055 9.055 0 0 1-5.604 1.93A9.18 9.18 0 0 1 6 23.85a12.773 12.773 0 0 0 6.918 2.027c8.3 0 12.84-6.876 12.84-12.84 0-.195-.005-.39-.014-.583a9.172 9.172 0 0 0 2.252-2.336' />
            </svg>
        </a>
    </li>
    <li class='in-btn'>
        <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url' target='_blank' title='Linkedin'>
            <svg alt='LinkedIn' title='LinkedIn' viewBox='0 0 32 32'>
                <title>LinkedIn</title>
                <path d='M26 25.963h-4.185v-6.55c0-1.56-.027-3.57-2.175-3.57-2.18 0-2.51 1.7-2.51 3.46v6.66h-4.182V12.495h4.012v1.84h.058c.558-1.058 1.924-2.174 3.96-2.174 4.24 0 5.022 2.79 5.022 6.417v7.386zM8.23 10.655a2.426 2.426 0 0 1 0-4.855 2.427 2.427 0 0 1 0 4.855zm-2.098 1.84h4.19v13.468h-4.19V12.495z' />
            </svg>
        </a>
    </li>
    <li class='gp-btn'>
        <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank' title='Google+'>
            <svg alt='Google+' title='Google+' viewBox='0 0 32 32'>
                <title>Google+</title>
                <path d='M12 15v2.4h3.97c-.16 1.03-1.2 3.02-3.97 3.02-2.39 0-4.34-1.98-4.34-4.42s1.95-4.42 4.34-4.42c1.36 0 2.27.58 2.79 1.08l1.9-1.83C15.47 9.69 13.89 9 12 9c-3.87 0-7 3.13-7 7s3.13 7 7 7c4.04 0 6.72-2.84 6.72-6.84 0-.46-.05-.81-.11-1.16H12zm15 0h-2v-2h-2v2h-2v2h2v2h2v-2h2v-2z' />
            </svg>
        </a>
    </li>
    <li class='pin-btn'>
        <a expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank' title='Pinterest'>
            <svg alt='Pinterest' title='Pinterest' viewBox='0 0 32 32'>
                <title>Pinterest</title>
                <path d='M7 13.252c0 1.81.772 4.45 2.895 5.045.074.014.178.04.252.04.49 0 .772-1.27.772-1.63 0-.428-1.174-1.34-1.174-3.123 0-3.705 3.028-6.33 6.947-6.33 3.37 0 5.863 1.782 5.863 5.058 0 2.446-1.054 7.035-4.468 7.035-1.232 0-2.286-.83-2.286-2.018 0-1.742 1.307-3.43 1.307-5.225 0-1.092-.67-1.977-1.916-1.977-1.692 0-2.732 1.77-2.732 3.165 0 .774.104 1.63.476 2.336-.683 2.736-2.08 6.814-2.08 9.633 0 .87.135 1.728.224 2.6l.134.137.207-.07c2.494-3.178 2.405-3.8 3.533-7.96.61 1.077 2.182 1.658 3.43 1.658 5.254 0 7.614-4.77 7.614-9.067C26 7.987 21.755 5 17.094 5 12.017 5 7 8.15 7 13.252z' />
            </svg>
        </a>
    </li>
        <li class='ws-btn'>
            <a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%3A%20&quot; + data:post.url' target='_blank' title='Whatsapp'>
                <svg alt='WhatsApp' title='WhatsApp' viewBox='0 0 32 32'>
                    <title>WhatsApp</title>
                    <path d='M19.11 17.205c-.372 0-1.088 1.39-1.518 1.39a.63.63 0 0 1-.315-.1c-.802-.402-1.504-.817-2.163-1.447-.545-.516-1.146-1.29-1.46-1.963a.426.426 0 0 1-.073-.215c0-.33.99-.945.99-1.49 0-.143-.73-2.09-.832-2.335-.143-.372-.214-.487-.6-.487-.187 0-.36-.043-.53-.043-.302 0-.53.115-.746.315-.688.645-1.032 1.318-1.06 2.264v.114c-.015.99.472 1.977 1.017 2.78 1.23 1.82 2.506 3.41 4.554 4.34.616.287 2.035.888 2.722.888.817 0 2.15-.515 2.478-1.318.13-.33.244-.73.244-1.088 0-.058 0-.144-.03-.215-.1-.172-2.434-1.39-2.678-1.39zm-2.908 7.593c-1.747 0-3.48-.53-4.942-1.49L7.793 24.41l1.132-3.337a8.955 8.955 0 0 1-1.72-5.272c0-4.955 4.04-8.995 8.997-8.995S25.2 10.845 25.2 15.8c0 4.958-4.04 8.998-8.998 8.998zm0-19.798c-5.96 0-10.8 4.842-10.8 10.8 0 1.964.53 3.898 1.546 5.574L5 27.176l5.974-1.92a10.807 10.807 0 0 0 16.03-9.455c0-5.958-4.842-10.8-10.802-10.8z' />
                </svg>
            </a>
        </li>
        <li class='print-btn'>
            <a href='javascript:print(document)'>
                <svg alt='Yazdır' title='Yazdır' version='1.1' viewBox='0 0 32 32'>
                    <title>Print</title>
                    <path d='M24.67 10.62h-2.86V7.49H10.82v3.12H7.95c-.5 0-.9.4-.9.9v7.66h3.77v1.31L15 24.66h6.81v-5.44h3.77v-7.7c-.01-.5-.41-.9-.91-.9zM11.88 8.56h8.86v2.06h-8.86V8.56zm10.98 9.18h-1.05v-2.1h-1.06v7.96H16.4c-1.58 0-.82-3.74-.82-3.74s-3.65.89-3.69-.78v-3.43h-1.06v2.06H9.77v-3.58h13.09v3.61zm.75-4.91c-.4 0-.72-.32-.72-.72s.32-.72.72-.72c.4 0 .72.32.72.72s-.32.72-.72.72zm-4.12 2.96h-6.1v1.06h6.1v-1.06zm-6.11 3.15h6.1v-1.06h-6.1v1.06z' />
                </svg>
            </a>
        </li>
        <li class='mail-btn'>
            <a expr:href='&quot;mailto:url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'>
                <svg alt='E-posta' title='E-posta' viewBox='0 0 32 32'>
                    <title>Email</title>
                    <path d='M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z' />
                    <path d='M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z' />
                </svg>
            </a>
        </li>
</ul>
</body>
</html>

Kodeks Editör

Blog CSS Sosyal Paylaşım Butonları

"Blog CSS Sosyal Paylaşım Butonları" 0 Yorum yapıldı.

Yorum Gönder

Kodeks Editör

İletişim Formu

Blog CSS Sosyal Paylaşım Butonları

"Blog CSS Sosyal Paylaşım Butonları" 0 Yorum yapıldı.

Yorum Gönder