Social share menu for blog or website using CSS and HTML

Posted by Abhay Makadiya at 5/04/2013

Each and every blog or Website should have a social sharing widget to get attention from visitors from social networks. Then you need somthing like this. The Design of social widgets on your blog or website really matters a lot for taking your visitors to share your content on various social networks like facebook, Twitter, Instagram, Youtube and many more.

In this post, I am giving you a stylish social sharing gadget for your blog with sliding effect on mouse hover.

Code in HTML/CSS:-



<!doctype html><html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>Aby Design code</title>
    <style type="text/css">
        body
        {
            background-color: #333;
        }
        #redessociales
        {
            width: 64px;
            height: 64px;
            border-radius: 75px;
            border: 5px solid #fff;
            background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2bs8eN_IJtInOyKW2pOagFa76rluioDRpWGktps4J1EaOBQ0X7ooKNjA-PRyAu8gzXP8jU-YzTBFDL0u8QhXix5Aznik3VyRRuOU5q2QI5yKYDXqUdGzsYQ2MCCiUTLrkqGlmMhMYmWP/s1600/share_core_square.jpg);
        }
        .smedia
        {
            position: absolute;
            -webkit-transition: left 0.5s cubic-bezier(0.1,0.8,0.9,1), opacity 1s linear;
            -moz-transition: left 0.5s cubic-bezier(0.1,0.8,0.9,1),opacity 1s linear;
            -o-transition: left 0.5s cubic-bezier(0.1,0.8,0.9,1), opacity 1s linear;
            display: inline;
            opacity: 0;
            width: 46px;
            height: 46px;
            z-index: 100;
            margin: 10px 0px 0px 20px;
            text-indent: -9999px;
            background: no-repeat;
            left: 3px;
        }
        #redessociales:hover .smedia
        {
            opacity: 1;
            transform: translate(0px,0);
            -webkit-transform: translate(0px,0);
            -o-transform: translate(0px,0);
            -moz-transform: translate(0px,0);
            margin: 10px 0px 0px 20px;
            position: absolute;
        }
        #redessociales:hover .smedia:nth-child(1)
        {
            position: absolute;
            left: 65px;
        }
        #redessociales:hover .smedia:nth-child(2)
        {
            position: absolute;
            left: 110px;
        }
        #redessociales:hover .smedia:nth-child(3)
        {
            position: absolute;
            left: 155px;
        }
        #redessociales:hover .smedia:nth-child(4)
        {
            position: absolute;
            left: 200px;
        }
        #redessociales:hover .smedia:nth-child(5)
        {
            position: absolute;
            left: 245px;
        }
        #redessociales:hover .smedia:nth-child(6)
        {
            position: absolute;
            left: 290px;
        }
        .smedia.facebook
        {
            background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNufZJbWS7xepQKELhfj3WuGiHzA3ebmJ-LDrW3YPoleCjoHIOVdQflfVoAPDnVppIC_48LGzhb44utzOFjU4ejin_rWWc9oIt3rA4Ir_OhogbeOgmaajIoDg7WkWu_9Af6X3wFsxkuaXN/s1600/bubble_facebook_share_button.png);
        }
        .smedia.twitter
        {
            background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyNGDmZT3QLXIvnQUF9pV_VRavU2IW3IK7629NuYPK3EGasPLFyNqPlVAxYvYYTpFU3eBSViKi-hs6zu-poKBP-JydM5QurgaE_nBQIrm3E8AyJHo7N0iwY-DKTDFonV_A7F_fxpJmC9ZE/s1600/bubble_twitter_share_button.png);
        }
        .smedia.email
        {
            background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4M3dtyS848j1kI8TY2LUTJzf4rL0URikjLKdE8gFyn4EMxkghE-OgbCTrALRCdZn1hlP4OwUYDzT2SCgZlO0XGaO0NYthq7XD3aRWD9jl4vBBhoaNYuWdBEjSSy-0c1oI4haJpMmUsrZk/s1600/bubble_email_share_button.png);
        }
        .smedia.instagram
        {
            background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQO8wQTwsH_11tA0xP-ReQTOFwSTxxPMUgFp0txLsuPFICU5eEAo9FZFvmg5MvX9N1gtudsK8ikIxFsD5MLbT68HLf3mopLyRRDMKRXAEvLae0ahBrEA9iDsgY6QIvqKV2g0e-UTepoukZ/s1600/bubble_instagram_share_button.png);
        }
        .smedia.youtube
        {
            background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhBLBVu7n1dPbD83OxQxM5zrTvoJOFDm_7pF-Ch7G0W5HeHhzBbQjNwIbBeB7b7y4HFa0xXeyi0ToV2_fgaT84KanYjs8YMxzz2d8WeRVKrMCrWcmmxRiHavC-p03e2pyYrK3F0sW_oKtl/s1600/bubble_youtube_share_button.png);
        }
        .smedia.vimeo
        {
            background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUpFHOgKKcRQ2XB2dPlaCM_NDSG2Cb0C8ynysrTLRtet-T_nndORCwu-SVbZdqTn4zkh6F8XHzVkqI0HsgCpzYLwUeCoPTlCqKrpWf_e7gr8vVgVIiSlTwydcB1mypDGT_yHBymZx5GP9n/s1600/bubble_vimeo_share_button.png);
        }
        .smedia:hover
        {
            background-position: 0 -46px;
        }
    </style>
</head>
<body>
    <div id="redessociales">
        <a class="smedia facebook" href="https://www.facebook.com/abhay.makadia.7">Uno</a>
        <a class="smedia twitter" href="https://twitter.com/abhay_makadia_">Dos</a> <a class="smedia instagram"
            href="#">Tres</a> <a class="smedia youtube" href="#">Cuatro</a> <a class="smedia vimeo"
                href="#">Cinco</a> <a class="smedia email" href="#">Seis</a>
    </div>
</body>
</html>