CSS SocialMedia Buttonはソーシャルメディアボタンのスタイリング

    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="share.js"></script>

    <!--Social Links-->
    <div class="socialWrapper">
        <h3>Share Post</h3>
        <a href= "https://www.facebook.com/sharer/sharer.php?u=altamircoelho.com" id="fb-share" class="face-text" title="Share on Facebook" target="_blank">
            <div class="img-wrap">
                <img src="img/facebook_small.png" class="share-icon" alt="facebook logo">
            </div>
            <span>Facebook</span>
        </a>
        <a href="" id="tweet" class="tweet-text" title="Share on Twitter" target="_blank">
            <div class="img-wrap">
                <img src="img/twitter_small.png" class="share-icon" alt="twitter logo">
            </div>
            <span>Twitter</span>
        </a>
    </div>

        <!--share-differently-->
    <div class="socialWrapper">
       <h3>Share Link</h3>
       <script>
           function fbShare(url, title, descr, image, winWidth, winHeight) {
               let winTop = (screen.height / 4) - (winHeight / 4);
               let winLeft = (screen.width / 4) - (winWidth / 4);
               window.open('http://www.facebook.com/sharer.php?s=100&p[title]=' + title + '&p[summary]=' + descr + '&p[url]=' + url + '&p[images][0]=' + image, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
           }
       </script>
       <a href="javascript:fbShare('http://www.cnn.com/', 'Fb Share', 'Facebook share popup', 120, 50)" class="face-text" title="Share on Facebook">
           <div class="img-wrap">
               <img src="img/facebook_small.png" class="share-icon" alt="facebook logo">
           </div>
           <span class="different-share">Share</span>
        </a>
   </div>

Download

• Tag
• Button
• CSS
• Facebook
• Javascript
• Twitter