Social share menu for blog or website using CSS and HTML


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>

3 comments

Social Widgets is a very popular thing to have in websites, blogs or profile pages. Everyone wants to share what there doing on facebook,twitter by email etc.Thanks for great post.
website design

Reply

You are welcome.
And Thanks a lot for comment.

Reply

Post a Comment