glowing neon social media icons | pink social media icons - codewithrandom

glowing neon social media icons | pink social media icons - codewithrandom

glowing neon social media icons | pink social media icons - codewithrandom


Welcome🎉 to Code With Random blog. In this blog, we learn that how to create glowing neon social media icons. We use HTML & CSS  for these simple glowing neon social media icons. Hope you enjoy our blog so let's start with a basic HTML structure for glowing neon social media icons.

HTML code for social media icons

 <!doctype html>  
 <html>  
 <head>  
 <title>Social Media Icons Neon Glow Effect</title>  
 </head>  
 <link rel="stylesheet" type="text/css" href="style.css">  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  
 <body>  
   <div class="container">  
     <div class="btn fb-btn">  
       <i class="fa fa-facebook" aria-hidden="true" id="fb"></i>  
     </div>  
     <div class="btn ig-btn">  
       <i class="fa fa-instagram" aria-hidden="true" id="ig"></i>  
     </div>  
     <div class="btn tw-btn">  
       <i class="fa fa-twitter" aria-hidden="true" id="tw"></i>  
     </div>  
     <div class="btn tw-btn">  
       <i class="fa fa-github" aria-hidden="true" id="tw"></i>  
     </div>  
     <div class="btn tw-btn">  
       <i class="fa fa-youtube" aria-hidden="true" id="tw"></i>  
     </div>  
   </div>  
   </body>  
 </html>  
There is all HTML code for the glowing neon social media icons. Now, you can see output without CSS, then we write CSS for glowing neon social media icons.
Output
glowing neon social media icons | pink social media icons - codewithrandom

CSS for social media icons 

  html,body  
 {  
   margin: 0;  
   padding: 0;  
   align-items: center;  
   justify-content: center;  
   height: 100%;  
   background: #fff;  
 }  
 .container  
 {  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   height: 100%;  
 }  
 .btn  
 {  
   width: 100px;  
   height: 100px;  
   background-color: #fafafa;  
   display: flex;  
   align-items: center;  
   justify-content: center;  
   margin-left: 2em;  
   margin-right: 1em;  
   cursor: pointer;  
   transition: all 0.3s;  
   border-radius: 10px;  
 }  
 i.fa  
 {  
   font-size: 44px;  
 }  
 #fb  
 {  
   color: #006fff;  
   text-shadow: 0 0 30px #006fff;  
 }  
 #ig  
 {  
   color: #ff5f40;  
   text-shadow: 0 0 30px #ff5f40;  
 }  
 #tw  
 {  
   color: #00acff;  
   text-shadow: 0 0 30px #00acff;  
 }  
 .btn.fb-btn  
 {  
   box-shadow: 0 20px 20px -17px rgba(0,111,255,0.53);  
 }  
 .btn.fb-btn:hover  
 {  
   transform: scale(1.2);  
   box-shadow: 0 30px 45px -15px rgba(0,111,255,0.65);  
 }  
 .btn.ig-btn  
 {  
   box-shadow: 0 20px 20px -17px rgba(255,16,39,0.5);  
 }  
 .btn.ig-btn:hover  
 {  
   transform: scale(1.2);  
   box-shadow: 0 30px 45px -15px rgba(255,16,39,0.57);  
 }  
 .btn.tw-btn  
 {  
   box-shadow: 0 20px 20px -17px rgba(0,255,255,0.53);  
 }  
 .btn.tw-btn:hover  
 {  
   transform: scale(1.2);  
   box-shadow: 0 30px 45px -15px rgba(0,111,255,0.6);  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output

glowing neon social media icons | pink social media icons - codewithrandom


Now we have completed our CSS section,  Here is our updated output with  CSSHope you like the glowing neon social media icons, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create glowing neon social media icons using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post