Create a social media widget with html and css

Create a social media widget with html and css

CSS HTML Widget

In this article, we will know how to create a social media widget using HTML and css. This widget I make for the targeted blogger you can also use any other website. If you want to know how I make this then you can see the on the below step.

HTML code

<div id="socialcounterd">
    <ul class="social-counter">
        <li class="social_item-wrapper"><a class="social_item social_youtube" href="https://www.youtube.com/channel/UCSWx5ks1PJ5AqIe2EsZb2kg?sub_confirmation=1" rel="nofollow noopener" target="_blank" title="Subscribe to Our Youtube"><i class="fa fa-youtube-play fa-fw social_icon"></i><span class="social_num"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Youtube</font></font></span></a>
        </li>
        <li class="social_item-wrapper"><a class="social_item social_facebook" href="https://www.facebook.com/arlinacode" rel="nofollow noopener" target="_blank" title="Follow Our Facebook"><i class="fa fa-facebook fa-fw social_icon"></i><span class="social_num"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Facebook</font></font></span></a>
        </li>
        <li class="social_item-wrapper"><a class="social_item social_twitter" href="https://twitter.com/ArlinaCode" rel="nofollow noopener" target="_blank" title="Follow Our Twitter"><i class="fa fa-twitter fa-fw social_icon"></i><span class="social_num"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Twitter</font></font></span></a>
        </li>
        <li class="social_item-wrapper"><a class="social_item social_codepen" href="https://codepen.io/arlinacode" rel="nofollow noopener" target="_blank" title="Follow our Codepen"><i class="fa fa-codepen fa-fw social_icon"></i><span class="social_num"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Codepen</font></font></span></a>
        </li>
        <li class="social_item-wrapper"><a class="social_item social_bloggerx" href="https://www.blogger.com/follow-blog.g?blogID=6243576702872104792" rel="nofollow noopener" target="_blank" title="Follow Our Site"><i class="fa fa-user fa-fw social_icon"></i><span class="social_num"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Blogger</font></font></span></a>
        </li>
       <li class="social_item-wrapper"><a class="social_item social_pinterest" href="https://id.pinterest.com/arlinacode/" rel="nofollow noopener" target="_blank" title="Follow Our Pinterest"><i class="fa fa-pinterest fa-fw social_icon"></i><span class="social_num"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Pinterest</font></font></span></a>
        </li>
    </ul>
</div>

Now i am use here font awosame cdn to get the icons you can also copy the below css cdn and install on you blog or website.

  <style src="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

CSS code

/* Social Media */
#socialcounterd{overflow:hidden;margin:auto}#socialcounterd ul{margin:0;list-style:none}#socialcounterd ul a{color:#fff}#socialcounterd ul li.social_item-wrapper{position:relative;float:left;width:49.1%;margin:0 5px 5px auto;padding:0;border:0;color:#fff;transition:all .3s}#socialcounterd ul li:nth-child(even).social_item-wrapper{margin:0 auto 5px auto}#socialcounterd ul li.social_item-wrapper:hover:after{animation:rubberBand 1.7s infinite}#socialcounterd ul li a.social_item{position:relative;border-radius:99em;display:block;font-weight:500;padding:0 15px;height:33px;line-height:33px;overflow:hidden}.social_icon{float:left;text-align:center;line-height:33px;font-size:1rem}#socialcounterd ul li a.social_item span{margin-left:10px}#socialcounterd ul li a.social_item.social_facebook{background:#2277e6}#socialcounterd ul li a.social_item.social_twitter{background:#1c9dec}#socialcounterd ul li a.social_item.social_youtube{background:#f80000}#socialcounterd ul li a.social_item.social_pinterest{background:#e71a21}#socialcounterd ul li a.social_item.social_bloggerx{background:#f39c12}#socialcounterd ul li a.social_item.social_codepen{background:#181829}#socialcounterd ul li.social_item-wrapper:hover .social_facebook,#socialcounterd ul li.social_item-wrapper:hover .social_twitter,#socialcounterd ul li.social_item-wrapper:hover .social_youtube,#socialcounterd ul li.social_item-wrapper:hover .social_pinterest,#socialcounterd ul li.social_item-wrapper:hover .social_bloggerx,#socialcounterd ul li.social_item-wrapper:hover .social_codepen{opacity:.95}.fa-facebook.social_icon,.fa-twitter.social_icon,.fa-youtube.social_icon,.fa-pinterest.social_icon,.fa-user.social_icon,.fa-codepen.social_icon{transition:all .3s}#HTML95{padding:10px}#socialcounterd ul li.social_item-wrapper:hover .social_icon{animation:rubberBand 1.2s ease}#socialcounterd ul li a.social_item:before,#socialcounterd ul li a.social_item:after{background:#fff;content:'';height:155px;opacity:0;position:absolute;top:-50px;transform:rotate(35deg);transition:all 2s cubic-bezier(0.19,1,0.22,1);width:50px}#socialcounterd ul li a.social_item:before{left:-50%}#socialcounterd ul li a.social_item:after{left:-100%}#socialcounterd ul li a.social_item:hover:before{left:120%;opacity:.2}#socialcounterd ul li a.social_item:hover:after{left:200%;opacity:.2}

Now save your widget and done. Thanks for with us.

Sayem Miaji