Glowing Social Media Icons Widget using only HTML and CSS

Hello readers, Today in this blog you'll learn how to create a Social Media Icons with CSS Glowing Effect. Previously I have shared a Social Media Icons with Hover Animation using only HTML and CSS, now it's time to create a Social Media Button with Glowing Effect.

The Social Media Widget is a simple widget that allows users to insert their social networks and connections profile URLs and other subscription options to show an icon to that social media site and more that open up in a separate browser window.

At first, these icons are in the initial stage where there is no glow effect. But when you hover on it, the specific hovered icon starts to glow. In the image, there is 2 Social Media Widget List with the same icons but which different glow colors. In the first widget, there are gold color glowing effects and in the second widget, there are default logo color glowing effects.

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program (Glowing Social Media Icons Widget).

Video Tutorial of CSS Glowing Social Media Icons on Hover



I hope you like these glowing effects and understood basic codes behind the creating of this Glowing Social Media Icons Widget. As you have seen in the video this is an effect that is based in only HTML & CSS. And, I believe a beginner who has a basic knowledge of HTML & CSS also can create this type of glow effect.

If you like this program (Glowing Social Media Icons Widget) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

Glowing Social Media Icons using HTML & CSS [Source Codes]

As always, before sharing the codes of this program (Glowing Social Media Icons Widget). Let's a few talk about the main tags and codes of this program. As you have seen in the video, at first I created a <ul> tag and placed all other <li> tags inside it. Then inside <li> tags, I create a <i> tag with the font awesome icons class name.

In the CSS File, first I reset default browser margins and padding to 0; using *CSS selector. Then placed all elements at the center using CSS Flexbox. After that, I did basic styling to icons to icons like set colors, sizes, backgrounds, etc. Then I set the gold color to all icons to show a glowing effect when we hover on it.

There are many things I left. Because I can't say all things in writing. I'm just talking about the main codes of this program. But, don't worry you'll understand all codes and programs after getting the source code of this program.

To create this program (Glowing Social Media Icons Widget). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

CSS FILE:


Thanks for visiting, Keep visiting.


21 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

  1. I put this and my whole site links got messy...i'm not expert in coding can u help set this style only for this icons without effecting my other style on the site.


    Thank you

    ReplyDelete
    Replies
    1. I can help you....
      You should change HTML and CSS Tag Values use class in tags....

      Delete
  2. Your YouTube videos are Great and Really Helpful.....

    Thanks for the Codes.....

    ReplyDelete
  3. hi, thank you for your valuable lecture and code!
    i want to use this source code for my website where i want to put my social-icon to right of my header( my name) follow up with nav bars so how can i use this? please explain in detail or show me a custom code....im a kind of newbie to the field

    thanks

    ReplyDelete
    Replies
    1. Yes you can use this widget on your website.

      Delete
  4. How do I add links to the icons?

    ReplyDelete
    Replies
    1. Add anchor tag inside each li tag and insert the url of your prefer site inside href attribute of this anchor tag. For further help you can contact me on Instagram.

      Delete
  5. how to get it glowing for all time..
    please tell me now ....

    you are god teacher..

    ReplyDelete
    Replies
    1. Kindly contact me on Instagram and I'll do it for you.

      Delete
  6. Heyy Bro, When I'm adding the link address the text color doesn't work properly??

    ReplyDelete
  7. when you add a link address, the hover on the icon font only works if your on the icon font, without link address the hover works if you hover over the white background

    ReplyDelete
  8. When adding the link address the text hover color doesn't work properly

    ReplyDelete

Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post